Cards that line up with subgrid
In the plain version each card lays out on its own, so the long title pushes its text and button down. With subgrid, all three cards share the parent's rows.
subgrid lets a nested grid reuse its parent's tracks, so titles, text and buttons line up across separate cards; and Grid (two-dimensional, layout first) and Flexbox (one-dimensional, content first) solve different problems and work best together.
Change the code and press Run (Ctrl+Enter). Predict what will happen first, then break it on purpose and read what changes. Your edits are saved and match the lesson page.
Ready for more? This phase has 5 hands-on exercises with automatic checks.
Practice questions
Write the code in the editor, run it, then open the model answer to compare.
Make three product cards (title, description, price row) whose descriptions and price rows line up across the cards, using subgrid.
A header has a logo on the left and three links on the right. Grid or Flexbox? Write the CSS.
Write a form where every label column is the width of the longest label, across two separate <fieldset>s.
Explain it without notes
What problem does subgrid solve, and how do you set it up for a row of cards?
What are the rules and limits of a subgrid?
How do you decide between Grid and Flexbox for a layout?
Why do the last items in a wrapped flex row look different from a grid's last row?
Preview
Console
Nothing logged yet.Expected console output
.plain buttons line up: false texts line up: false
.sub buttons line up: true texts line up: true
true