🎚

CSS Grid Layout Generator (Visual Builder)

Visual builder for CSS Grid Layout. 6 presets (Holy Grail, Magazine, Auto-fit responsive…). Live preview + copy ready-to-use CSS.

Layout presets

Column template (grid-template-columns)

Row template (grid-template-rows)

Gap: 12px

fr = fraction. 1fr 2fr = 1:2 split. repeat(3, 1fr) = 3 equal columns. minmax(200px, 1fr) = at least 200px wide.

Preview

CSS

CSS Grid Layout — the modern standard for 2D UIs. Supported since 2017. Use fr for responsive, auto-fit/auto-fill for self-arranging grids.

CSS Grid vs Flexbox

Flexbox: 1-dimensional — either row or column. Best for navbars, button lists, card rows.
CSS Grid: 2-dimensional — rows + columns at once. Best for page layouts, dashboards, galleries, magazine layouts.
Modern sites typically use BOTH: Grid for macro layout, Flexbox for micro components.

fr = the remaining space after fixed sizes are subtracted:

1fr 1fr = 2 equal columns (50/50).
1fr 2fr = 1:2 split (33%/67%).
200px 1fr = 200px sidebar, main fills the rest.
repeat(3, 1fr) = 3 equal columns (shortcut).
repeat(auto-fit, minmax(200px, 1fr)) = responsive — column count adapts to viewport.

3 equal columns: feature grid, card row.
Sidebar + Main: dashboard, docs site (240px sidebar nav, 1fr content).
Holy Grail: header / sidebar-main-aside / footer — the classic web layout.
Magazine (4 cols): blog index, news sites.
Auto-fit responsive: auto-fit + minmax — collapses from 4 → 2 → 1 column with viewport.
Masonry: Pinterest-style. Note: grid-template-rows: masonry is Firefox-only for now; Chrome is in progress.

gap > margin: use gap: 16px for spacing between cells instead of margins on children.
grid-area: name areas for readability. grid-template-areas: "header header" "sidebar main".
Responsive: prefer auto-fit + minmax over media queries for self-adapting grids.