Hands-on demos, sliders, and presets for every grid property—learn, experiment, and master two-dimensional layouts with live feedback.
Add display: grid to a container and its direct children become grid items. The container creates a grid formatting context with rows and columns (tracks).
grid is block-level (takes full width). inline-grid flows inline with surrounding content — notice the text before/after.Define the number and size of columns/rows. Use px, fr, auto, minmax(), or repeat().
The fr unit distributes available space proportionally. It's the grid equivalent of flex-grow.
1fr = one fraction of available space. If a column is 200px and the rest is 1fr 1fr, those two split whatever remains after the fixed 200px.Adds space between tracks without affecting outer edges. Drag the sliders to adjust independently.
Place items by specifying start/end grid lines. Lines are numbered from 1. Use span to span across tracks.
grid-column: 1 / 3 means "from line 1 to line 3" — spanning 2 columns. You can also write span 2.Name regions of your grid with an ASCII-art map. Each item uses grid-area to claim its spot.
. for empty cells: "header header .". Every row must have the same number of columns. Named areas must form rectangles.justify-items aligns items inside cells along the inline (row) axis. align-items aligns along the block (column) axis.
stretch — items fill their entire cell. Switch to start/center/end to see items shrink to content size and move within cells.When the total grid size is smaller than the container, these properties distribute the tracks (not items).
100px columns here instead of fr.Override a single item's alignment within its cell.
Use repeat(auto-fill, minmax(…)) or auto-fit for responsive grids without media queries. Drag the slider to see the difference.
auto-fill creates as many tracks as fit, leaving empties. auto-fit collapses empty tracks so items grow to fill. Visible only when few items + wide container.Intrinsic sizing keywords let track sizes respond to their content.
min-content = smallest size without overflow. max-content = ideal size, no wrapping. fit-content(200px) = like max-content but capped at 200px.Items can span multiple rows/columns and even overlap using explicit placement + z-index.
z-index to control which item appears on top.Give grid lines names in square brackets, then reference them for placement instead of numbers.
grid-column: sidebar-start / sidebar-end is much clearer than 1 / 2.A grid item can be a grid container itself. subgrid lets a nested grid inherit parent track lines.
subgrid has good browser support (Chrome 117+, Firefox 71+, Safari 16+). It inherits parent lines so nested items align perfectly with outer tracks.See how the grid auto-places new items. Control implicit row sizing with grid-auto-rows.
grid-auto-rows controls the height of implicitly created rows (when items overflow the explicit template).Click any card to see the live demo + CSS. Patterns you'll use daily.
Both powerful — but for different jobs. Use them together.
| Aspect | Grid | Flexbox |
|---|---|---|
| Dimension | Two-dimensional (rows and columns) | One-dimensional (row or column) |
| Approach | Layout-first — grid defines structure | Content-first — items dictate layout |
| Best for | Page layouts, dashboards, galleries | Navbars, toolbars, card rows, centering |
| Item sizing | Explicit tracks (fr, px, auto) | Grow/shrink dynamically from content |
| Alignment | Row axis + column axis + areas | Main axis + cross axis |
| Overlap | Easy with grid-area + z-index | Not naturally |
| Named regions | grid-template-areas ✓ | No equivalent |
Mix all properties together. This is where it clicks.
Quick reference for every CSS Grid property.