display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(3, 1fr);
column-gap: 16px;
row-gap: 16px;
justify-items: stretch;
align-items: stretch;Build responsive grid layouts visually. Set your columns, rows, and gaps — then copy the CSS.
Here's exactly what you'll walk away with. Clean, production-ready CSS — no wrappers, no vendor prefixes, no unnecessary declarations.
.grid-container {display: grid;grid-template-columns: repeat(3, 1fr);grid-template-rows: auto auto;gap: 16px;justify-items: stretch;align-items: stretch;}.grid-item {/* your item styles here */}
Six steps. Each control maps directly to a CSS property — plain and fast.
1fr track in grid-template-columnsgrid-template-rowsgap — space between cells, never around them200px 1fr or repeat(auto-fit, minmax(250px, 1fr))Ready-to-use patterns for the most common CSS Grid use cases. Copy any of these directly into your project.
.card-grid {display: grid;grid-template-columns:repeat(auto-fit, minmax(280px, 1fr));gap: 24px;}
.sidebar-layout {display: grid;grid-template-columns: 260px 1fr;gap: 32px;min-height: 100vh;}
.dashboard {display: grid;grid-template-areas:"header header header""sidebar main widgets""footer footer footer";grid-template-columns: 240px 1fr 300px;grid-template-rows: 64px 1fr 56px;height: 100vh;gap: 16px;}
.gallery {display: grid;grid-template-columns:repeat(auto-fill, minmax(200px, 1fr));gap: 12px;}
.features {display: grid;grid-template-columns: repeat(3, 1fr);gap: 20px;align-items: stretch;}
Two topics developers search constantly. Explained plainly — no padding, no filler.
The fr (fractional unit) makes CSS Grid layouts feel effortless. Instead of calculating percentages, you describe how space is shared.
| You write | What it means | Result |
|---|---|---|
1fr 1fr 1fr | 3 equal parts | Three equal columns |
1fr 2fr | Total split into 3 parts | Second column is twice as wide |
200px 1fr | First is fixed; second fills rest | Sidebar + flexible content area |
1fr 1fr 1fr 1fr | 4 equal parts | Four equal columns |
fr units only distribute space left over after fixed values (px, %) are subtracted. This makes mixed layouts like 200px 1fr 1fr predictable and easy.This is one of the most searched CSS Grid questions. Here it is, plain and simple:
| Keyword | What it does |
|---|---|
auto-fill | Creates as many column tracks as will fit — even if some are empty. Grid structure stays visible. |
auto-fit | Creates only the tracks needed for your content. Empty tracks collapse to zero width. Remaining items expand. |
Rule of thumb: use auto-fill for galleries where you want consistent column structure. Use auto-fit for cards where you want them to fill the row.
/* auto-fit: items expand to fill row */grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));/* auto-fill: empty columns preserved */grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
Real developer pain points, explained and solved. The issues that break layouts silently — and the exact fixes.
Adding margin to grid items causes uneven spacing at the edges and makes responsive layouts unpredictable. Edge items get double spacing.
Always use gap on the grid container. It only applies between items — never on the outside edges. This is exactly what the Grid Generator uses.
Writing 200px 1fr 1fr and expecting the 1fr columns to be equal halves of total width. They're not — they share what's left after 200px.
Subtract fixed widths from total width first. What remains gets divided by fr units. The generator shows this live, making the behaviour immediately obvious.
Wrapping grid inside grid inside grid creates layouts that break on edge-case screen sizes and become impossible to maintain.
Use grid-template-areas for complex layouts instead of nesting. Define the entire layout at the top level. See Pattern 03 (Dashboard) above.
Using order or grid placement to rearrange elements visually without updating the HTML order. Screen readers follow the DOM — not the visual grid.
Keep your HTML in logical reading order. Use grid placement for visual adjustments only — not to restructure content hierarchy.
Questions from real Google search data — answered directly, with no padding.