Tracks inside the container: -content
The tracks use 160px of 300px width and 100px of 200px height. space-between puts the spare 140px between the two columns; align-content: center puts 50px above and below the rows. Try place-content: end center.
justify-* aligns along the row (inline) axis and align-* along the column (block) axis; -items and -self move items inside their grid areas, -content moves the whole set of tracks inside the container, and place-* sets both axes at once.
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.
Centre a 120px by 60px button both ways inside a 100%-wide, 300px-tall hero section using grid.
A grid has three fixed 100px columns in a 600px container. Write the CSS to put equal space before, between and after the columns.
In a grid of cards where all items stretch, make only the .price item sit at the bottom-right corner of its cell.
Explain it without notes
Explain the difference between justify-items, justify-self and justify-content in grid.
Why do grid items fill their cells by default, and when don't they?
When does align-content have any effect?
What does place-items: end center do?
Preview
Console
Nothing logged yet.Expected console output
item 1 x=0 y=50
item 4 x=220 y=100