grid-auto-flow: dense and column
Item 3 needs two columns and can't fit in row 1's last cell, so it moves to row 2. Without dense, item 4 follows it (x=200, y=40) and the hole stays. With dense, item 4 goes back to the hole (y=0). In the column grid, items fill down two rows, then start a new 80px column.
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
.sparse item 4 at x=200 y=40
.dense item 4 at x=200 y=0
.col item 3 at x=80 y=0
.col item 5 at x=160 y=0