Seven demos of CSS Grid features: auto-fill and auto-fit side by side, a page described with named areas, cards aligned with subgrid, items spanning rows and columns, gaps filled with dense packing, a caption layered over an image on one grid and the robust min() column formula.
Two grids with the same three items: auto-fill keeps empty column tracks when there is spare room, so items stay their minimum size; auto-fit collapses the empty tracks, so the items stretch to fill the row. The difference only shows when there are fewer items than fit.
A full page skeleton described with grid-template-areas: header, nav, main, aside and footer. The narrow version is a different map where everything stacks, defined in one container query, and the HTML order stays the logical reading order.
Three cards whose titles, text and buttons line up across the row even though the text lengths differ. Each card spans three rows of the parent grid and uses grid-template-rows: subgrid, so all cards share the same row heights.
View code
<div class="gdl3"><article><h3>Basic</h3><p>Good for one person.</p><a href="#b">Choose</a></article><article><h3>Team plan with extras</h3><p>Shared libraries, roles and an audit log for everyone.</p><a href="#t">Choose</a></article><article><h3>Pro</h3><p>Everything in Team.</p><a href="#p">Choose</a></article></div>
A six-column grid where some items span two columns or two rows, set with grid-column: span 2 and grid-row: span 2. Spans are relative to where the item lands, so the layout stays tidy as items are added.
Wide items can leave holes when they do not fit at the end of a row. grid-auto-flow: dense lets later, smaller items move up to fill the holes. It changes the visual order from the source order, so only use it where order does not matter, like a photo wall.
Grid items can share cells, which is a clean way to layer a caption over an image without absolute positioning. Both the image and the caption are placed on the same grid area, and the caption aligns to the bottom of it.
View code
<figure class="gdl6"><div class="im" role="img" aria-label="Mountain lake"></div><figcaption>Lake Bled, early morning</figcaption></figure>
repeat(auto-fill, minmax(min(160px, 100%), 1fr)) is the robust card grid: the min() stops a single column overflowing when the container is narrower than 160px, which a plain minmax(160px, 1fr) would do.
grid-template-areas lets you draw the layout as strings. Redefine the strings in a container or media query and every area moves, without touching the HTML.
auto-fill or auto-fit
Both create as many columns as fit. auto-fill keeps empty tracks, so items stay at their minimum size; auto-fit collapses them, so items stretch to fill the row.
subgrid aligns nested parts
A card that spans several rows with grid-template-rows: subgrid uses the parent's rows, so titles, text and buttons line up across every card in the row.
dense changes visual order
grid-auto-flow: dense fills holes by moving later items earlier. Screen readers and the Tab key still follow the source order, so keep it for content where order does not matter.
Frequently asked questions
Is subgrid supported?
Yes, in all current major browsers.
Why min(160px, 100%) inside minmax?
It stops a single column overflowing when the container is narrower than 160px.
Grid or flexbox?
Grid for two-dimensional layouts; flexbox for rows or columns of items that size themselves.