Platform

Engineering

Philosophy

GridCraft CSS Sandbox

A visual design workspace to prototype CSS grids dynamically. Tweak rows, columns, and spacing parameters, view structural adjustments in real-time, and copy clean CSS declarations to your codebase modules.

Grid Parameters

Columns 3
Rows 2
Column Gap (px) 16px
Row Gap (px) 16px

Export CSS

.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, 1fr);
  column-gap: 16px;
  row-gap: 16px;
}