Subgrid columns: one label width for the whole form
The label column is as wide as the longest label in either fieldset ("Postcode or PIN code"), so all four inputs line up. Change subgrid to max-content 1fr and run: each fieldset sizes its own label column, and the console prints false.
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
all inputs start at the same x: true