Centring, images and auto margins
place-items: center centres the 80×40 box. The image is not stretched to 200×120: elements with an aspect ratio default to start. The auto margins soak up the free space on the left, top and bottom.
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
.center .dot x=60 y=40 80x40
img x=0 y=0 40x40
.push x=120 y=40 80x40