fr subtracts the gaps, percentages don't
The dashed outline is the 400px container. With percentages, the second column ends at 420px: it sticks out by exactly one gap. fr shares what is left after the gap, so it fits.
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
.pct column width: 200 right edge: 420
.fr column width: 190 right edge: 400