Wrapping: Flexbox vs Grid
Flexbox lays out each line on its own, so items 4 and 5 grow to share their line (180px each). Grid keeps them in the 120px column tracks. Neither is wrong: pick the behaviour your design needs.
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
.flex item 1: 120 item 5: 180
.grid item 1: 120 item 5: 120