10 hands-on exercises and 10 find-the-bug challenges for the CSS Grid Container lesson. Every one is checked automatically in the browser — write the code, run it, and the tests tell you what still fails.
Make .gallery a grid container with exactly three equal columns, using grid-template-columns: repeat(3, 1fr).
This grid's tiles are touching. Add a 16px gap between both rows and columns.
Make .responsive-grid automatically fit as many 200px-minimum columns as space allows, using grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)).
Give .layout two rows of exactly 80px each, using grid-template-rows: 80px 80px.
Center every .icon-grid item, both horizontally and vertically, within its own cell using place-items: center.
Make #grid a grid container.
Make #grid an inline grid container.
Give the grid a 20px gap.
Set grid-auto-flow to column.
Centre every item on both axes.
.layout was meant to be a CSS grid, but display is set to block, so grid-template-columns has no effect. Fix the display value.
This gallery should show 3 columns, but it's only defined with 2. Fix grid-template-columns to create three equal columns.
Ready to write the code?
The editor, the automatic checks and the worked solutions open up with an account.
Open the workspaceThis board's cells are touching because gap is set to 0. Give it a 12px gap instead.
This grid's column sizes use a typo'd unit ("1f" instead of "1fr"), so the browser ignores it and falls back to a single column. Fix the unit.
.badge-grid's items should be centered in their cells, but align-items is set to stretch. Fix it to center.
Grid properties do nothing without display: grid.
This layout needs a grid container.
The value is inline-grid, not grid-inline.
The property is grid-auto-flow.
The container needs display: grid, not the cells.