TOOLS / 22 / DESIGN / LIVE

Grid Studio

Control columns, gutters, side space and maximum width, inspect the resulting structure and export practical container rules.

GRID STUDIO / RESPONSIVE LAYOUT12 COLUMNS

COLUMNS / 12GUTTER / 24PXSIDE SPACE / 32PXMAX WIDTH / 1440PX

LIVE GRID / VIEWPORT PREVIEW

123456789101112

Container max 1440px · side space 32px · gutter 24px

CSS OUTPUT166 CHARS

.container {
  width: min(100% - 64px, 1440px);
  margin-inline: auto;
}

.grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 24px;
}

LAYOUT / LIVE2–16 columns

The preview exposes every column instead of hiding the system behind sample cards.

OUTPUT / CSS GRIDProduction primitives

Export container sizing and repeatable minmax column rules.

RESPONSIVE / SCOPEFoundation, not breakpoint map

Final breakpoints still depend on content and must be tested in the product.