CSS Grid Layout Generator (Visual Builder)

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.

The fr unit (fraction)

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.

6 common layouts

• 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.

Tips

• 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.