1fr has a minimum: the blowout
In .a the first column refuses to shrink below its content (300px), so the second gets only 100px. In .b the columns stay equal and the green content overflows into column 2.
display: grid turns an element into a grid container; grid-template-columns and grid-template-rows draw its tracks, the fr unit shares out leftover space, and gap puts gutters between tracks, while the children fill the cells in order.
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 a grid with a fixed 240px sidebar column and a main column that takes the rest, with a 24px gap.
A 600px-wide grid has grid-template-columns: 1fr 2fr 1fr and gap: 20px. How wide is each column?
Build a 3 by 2 grid of equal boxes where each row is exactly 100px tall and the gaps are 12px.
Explain it without notes
What happens to an element and its children when you set display: grid?
How does the browser calculate the size of an fr track?
Why does 50% 50% with a gap overflow, while 1fr 1fr doesn't?
Why can a 1fr column end up much wider than its neighbours, and how do you stop it?
Preview
Console
Nothing logged yet.Expected console output
.a 300px 100px
.b 200px 200px