The implicit grid and grid-auto-rows
You defined one 60px row. Items 4 to 7 need two more rows, so the browser adds them at the grid-auto-rows size. The computed value lists implicit tracks too.
repeat() writes many tracks at once, minmax() gives a track a smallest and largest size, auto-fill and auto-fit let the grid choose how many columns fit, and grid-auto-rows, grid-auto-columns and grid-auto-flow control the extra tracks the grid creates on its own.
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.
Write a gallery grid where every card is at least 180px wide, cards share any extra width, and there's a 16px gap, with no media queries.
A grid has grid-template-columns: repeat(4, 1fr) and 10 items. You want every row to be at least 150px tall but taller when needed. Write the CSS.
Write a grid that lays out its items in columns of three, top to bottom, adding new 120px-wide columns to the right as needed.
Explain it without notes
What does minmax(200px, 1fr) mean for one track?
Explain the difference between auto-fill and auto-fit, and when you can see it.
What is the implicit grid, and which properties size it?
What does grid-auto-flow: dense do, and what is its accessibility risk?
Preview
Console
Nothing logged yet.Expected console output
columns: 96px 96px 96px
rows: 60px 40px 40px