auto-fill vs auto-fit with two items
Both grids fit 4 tracks: (460 + 20) / (100 + 20) = 4. auto-fill keeps the two empty tracks, so each item is 100px. auto-fit collapses them to 0px, so the two items share the whole row: (460 − 20) / 2 = 220px.
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
.fill tracks: 100px 100px 100px 100px
.fill item width: 100
.fit tracks: 220px 220px 0px 0px
.fit item width: 220