Items inside their areas: -items and -self
i1 fills its whole 150×80 cell (stretch). i2 is centred across its cell but still stretches vertically. i3 stretches across but sits at the bottom. i4 is centred both ways.
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
i1 x=0 y=0 150x80
i2 x=195 y=0 60x80
i3 x=0 y=130 150x30
i4 x=195 y=105 60x30