Columns, fr and gap
getComputedStyle returns the resolved column sizes in px, so 1fr 2fr comes back as 100px 200px. Change gap to 30px and work out the new sizes before you run.
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
columns: 100px 100px 200px
gaps: 10px 10px
item 1 width: 100
item 2 width: 100
item 3 width: 200
item 4 is on a new row: true