Every CSS Grid layout you'll build in real projects — basic columns, template areas, galleries, dashboards and fully responsive grids. Live visual preview + copy-ready code for each.
CSS Grid can build almost any layout, which makes it easy to over-engineer a page that just needed three columns. The six categories below map to the layout problems you'll run into most often — pick the one that matches your actual content, not the most impressive-looking pattern.
Fixed or fractional columns for straightforward content — a two- or three-column layout, a simple sidebar. Start here; most pages never need more.
Named regions (grid-template-areas) for a page shell — header, sidebar, main, footer. Readable at a glance in the CSS itself, which makes it the easiest pattern to hand off to another developer.
Equal-size tiles for images, cards, or products, usually paired with auto-fill so the grid fills the row without you counting columns by hand.
auto-fit/auto-fill with minmax() — the grid reflows on its own as the viewport narrows, no breakpoints written by hand. The pattern to reach for before adding a media query.
Mixed-size panels — a wide chart next to two stacked stat cards, for example — using grid-column: span N to size cells individually instead of forcing everything into one uniform grid.
Overlapping items, negative line numbers, subgrid — for the layouts basic row/column math can't express. Reach for these only once a simpler pattern genuinely doesn't fit.
minmax() before you reach for a media query. grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)) handles most "how many columns fit" decisions on its own, and it keeps the layout logic in one line instead of scattered across three breakpoints.
CSS Grid is a two-dimensional layout system. You define a grid container with display: grid, then control both rows and columns with grid-template-columns and grid-template-rows. Items are placed automatically or explicitly into cells using line numbers, named areas, or span values.
Flexbox is one-dimensional — it arranges items along a single row or column. CSS Grid is two-dimensional — it controls rows and columns simultaneously. Use Flexbox for component internals (navigation, button groups, card layouts). Use Grid for page-level layout or any layout requiring precise two-axis alignment.
Use auto-fill or auto-fit with minmax(): grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); This creates as many columns as fit, each at least 250px wide. No media queries needed — the grid collapses to fewer columns as the viewport narrows.
fr stands for "fraction unit" — a share of the remaining free space. grid-template-columns: 1fr 2fr creates two columns where the second is twice as wide. Unlike percentages, fr automatically accounts for gap spacing, so columns never overflow their container.
Use grid-column: span N to span N columns: .featured { grid-column: span 2; } For rows: grid-row: span 2. Or use explicit line numbers: grid-column: 1 / 4 stretches from column line 1 to line 4 (spanning 3 columns).