09:30
\nSubgrid
\nAligning card content across a row without fixed heights.
\nRoom A
\nPut three Waypoint session cards side by side and the problem jumps out. One title fits on a line, one wraps to two, one to three. Each card lays out its own content, so the abstracts start at three different heights and the room labels at the bottom form a staircase. Designers notice. Users notice less, but the page looks unfinished.
\nThe old fixes were fixed heights (which break with real content) or JavaScript that measures every title. Subgrid makes the cards share one set of rows.
\nWhen a card becomes display: grid, it creates its own, independent tracks. Its title row is as tall as its title; the neighbouring card’s title row is as tall as that title. Nothing connects them, because each card only knows about its own content.
What you want is for the “title row” to be one track shared across all cards in the same visual row, sized by the tallest title. That shared track has to live in the parent, the .sessions grid, and the cards need to borrow it.
.sessions {\n display: grid;\n grid-template-columns: repeat(auto-fill, minmax(min(16rem, 100%), 1fr));\n gap: 24px;\n}\n\n.session-card {\n display: grid;\n grid-row: span 4; /* time, title, abstract, room */\n grid-template-rows: subgrid; /* use the parent's four rows */\n row-gap: 8px; /* tighter than the parent's 24px */\n}Two declarations do the work. grid-row: span 4 makes each card occupy four rows of the parent grid. grid-template-rows: subgrid tells the card not to create its own rows but to use the four it spans. The card’s four children (time, title, abstract, room) are placed into those parent rows in order.
Now the browser sizes each parent row by the tallest content placed in it from every card in that row. The title track grows to fit the three-line title, the shorter titles get the same track, and every abstract starts at the same line. Room labels line up at the bottom.
\nNotice that the parent never declares grid-template-rows. It doesn’t need to: the cards’ spans create implicit rows, and those rows are sized from the content the subgrids place in them. Every new row of cards gets its own four tracks, so cards in the second visual row align with each other but not with the first row, which is what you want.
A subgrid inherits the parent’s gap. Here the parent uses 24px between cards, which is far too much between a title and its abstract, so the card overrides row-gap for its own tracks. The space between cards is unaffected.
Subgrid works on columns too. A classic case on Waypoint is the speaker profile form: labels in one column, inputs in the next, and every label column the same width across several fieldsets. Making each fieldset grid-column: span 2; grid-template-columns: subgrid gives every fieldset the outer form’s columns, so labels align all the way down. Named grid lines from the parent are also visible inside the subgrid, so grid-column: content-start / content-end keeps working one level down.
The exercise gives you three session cards with titles of different lengths. Turn each card into a row subgrid so that abstracts and room labels line up across the row. The checks compare the vertical positions of those parts across cards. The next lesson stays with sizing: min(), max(), clamp() and the keywords that let content decide how big things are.
grid-template-rows: subgrid uses its parent’s row tracks instead of creating its own, so content in sibling cards shares the same rows.","The subgridded item must span as many parent tracks as it has parts, for example grid-row: span 4 for a four-part card.","A subgrid inherits the parent’s gap by default and can override it with its own row-gap or column-gap.","Subgrid has been Baseline since September 2023 and widely available since March 2026, so aligned card layouts no longer need fixed heights or JavaScript measuring."],"further":[{"title":"Subgrid (MDN)","url":"https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Grid_layout/Subgrid"},{"title":"CSS subgrid (web.dev)","url":"https://web.dev/articles/css-subgrid"}],"quiz":[{"q":"Each card has four children (time, title, abstract, room). Why don’t the rooms line up?
\n.sessions { display: grid; grid-template-columns: repeat(3, 1fr); }\n.session-card { display: grid; grid-template-rows: subgrid; }subgrid only works on columns, not rows.","why":"subgrid works on either axis or both: grid-template-rows: subgrid, grid-template-columns: subgrid."},{"text":"The parent needs grid-template-rows: subgrid too.","why":"The parent is the grid that owns the tracks; only the nested grid uses the subgrid keyword."}],"answer":0},{"q":"What’s the most robust way to make every card’s room label align across a row when titles wrap to different numbers of lines?
","options":[{"text":"Give every title a fixedheight: 3em.","why":"A fourth line of title overflows, and a one-line title leaves a hole; fixed heights break the moment content changes."},{"text":"Measure the tallest title in JavaScript and set the others to match.","why":"It works, but it’s slow, runs again on every resize and font load, and is exactly the job subgrid now does in CSS."},{"text":"Make each card a row subgrid spanning four parent rows.","why":"Correct. All cards in a row share the same four tracks, so each track grows to the tallest content and everything below lines up."}],"answer":2},{"q":"The parent grid has gap: 24px, and the subgridded cards look too spread out inside. What do you change?
gap: 0 on the parent grid.","why":"That also removes the space between the cards themselves, which you wanted to keep."},{"text":"Set row-gap: 8px on the subgridded card.","why":"Correct. A subgrid inherits the parent’s gaps by default but can override them for its own tracks."},{"text":"Add negative margins to the card’s children.","why":"Negative margins fight the layout instead of configuring it, and break when the gap changes."},{"text":"Nothing; the inherited gap can’t be changed in a subgrid.","why":"The gap can be overridden; only the track sizes come from the parent."}],"answer":1}],"exercise":{"kind":"web","mode":"dom","starter":{"html":"09:30
\nAligning card content across a row without fixed heights.
\nRoom A
\n10:15
\nWhat changed when every component started measuring itself.
\nRoom B
\n11:00
\noklch(), color-mix() and palettes that stay accessible.
\nMain hall
\n09:30
\nAligning card content across a row without fixed heights.
\nRoom A
\n10:15
\nWhat changed when every component started measuring itself.
\nRoom B
\n11:00
\noklch(), color-mix() and palettes that stay accessible.
\nMain hall
\nThe three cards sit in a three-column grid, but their titles wrap to different numbers of lines, so the abstracts and room labels sit at different heights. Make each .session-card a row subgrid that spans the four parts (time, title, abstract, room), so that every abstract starts at the same height and every room label lines up. Keep the cards side by side and don’t use fixed heights.
subgrid. The card also needs display: grid.",".session-card { display: grid; grid-row: span 4; grid-template-rows: subgrid; } (add row-gap if the spacing looks too wide)."],"explanation":"grid-row: span 4 makes each card occupy four rows of the .sessions grid, and grid-template-rows: subgrid makes the card use those rows instead of creating its own. Each parent row is now sized by the tallest item placed in it from all three cards, so the title row fits the longest title and every abstract and room label starts on the same line. Without the span, the card has one track to share, so its children would all be placed in that one row and overlap.