CSS Grid
CSS Grid is perfect for two-dimensional layouts (rows AND columns at once). Define grid columns with grid-template-columns. Use fr units to share available space. gap controls gutters between cells. Grid is ideal for card galleries, page layouts, and dashboards.
Appy Says…
CSS Grid is the most powerful layout system the web has ever had. Photo galleries, magazine layouts, dashboards, responsive grids — things that used to require JavaScript and complex hacks now take 10 lines of CSS.
What is CSS Grid?
CSS Grid arranges elements in two dimensions: rows AND columns. It's the go-to for full-page layouts, image galleries, and any complex 2D arrangement.
- •
display: grid— activate grid - •
grid-template-columns: 1fr 1fr 1fr— three equal columns - •
grid-template-columns: repeat(3, 1fr)— same thing - •
grid-template-rows— control row sizes - •
gap: 16px— spacing between cells - •
grid-column: 1 / 3— span from column line 1 to 3 - •
grid-area: header+grid-template-areas— named layout - •Auto-fit:
repeat(auto-fit, minmax(250px, 1fr))— responsive without media queries
Think of it like a Minecraft map grid
A Minecraft chunk map is a perfect grid — rows and columns of equal cells. CSS Grid works the same way, but you can make cells span multiple columns (like a biome taking up 3 chunks wide) using grid-column.
How It Works
- •1. Parent:
display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; - •2. Children automatically fill the grid cells in order
- •3.
frunit = fraction of available space - •4. Override a child's position:
grid-column: 1 / -1;(span full width) - •5.
auto-fit+minmax: responsive columns with no media queries - •6. Grid areas: name zones visually with
grid-template-areas: 'header header' 'sidebar main'
Real-World Examples
- •Responsive photo gallery:
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); - •Dashboard: header full-width, sidebar + main two-column below
- •Product cards:
repeat(4, 1fr)on desktop,repeat(2, 1fr)on mobile - •Pinterest-style masonry (with
grid-auto-rows+ JS span assignment)
Key Facts
- •CSS Grid is supported in 97%+ of browsers
- •Grid and Flexbox complement each other — use Grid for page layout, Flexbox for component internals
- •
auto-fillvsauto-fit: auto-fill keeps empty tracks, auto-fit collapses them - •Firefox has the best DevGrid visualiser in its DevTools
Watch Out!
Don't use Grid for everything — Flexbox is simpler for single-row/column components like navbars or button groups. Use Grid when you need both row AND column control simultaneously.
Remember
repeat(auto-fit, minmax(250px, 1fr)) creates a fully responsive grid with zero media queries. This single line works for most card/gallery layouts.
What You Learned
- •CSS Grid: display:grid + grid-template-columns creates 2D layouts
- •fr units, gap, auto-fit/minmax for responsive layouts without media queries
- •Unlocks: page layouts, photo galleries, dashboards, responsive card grids
Key Facts
- →CSS Grid is supported in 97%+ of browsers
- →Grid and Flexbox complement each other — use Grid for page layout, Flexbox for component internals
- →
auto-fillvsauto-fit: auto-fill keeps empty tracks, auto-fit collapses them - →Firefox has the best DevGrid visualiser in its DevTools
Real-World Examples
Remember
repeat(auto-fit, minmax(250px, 1fr)) creates a fully responsive grid with zero media queries. This single line works for most card/gallery layouts.
Quick Quiz
What does grid-template-columns: 1fr 1fr do?