1.Build a 3-column galleryexercise · easy · 15 min
Make .gallery a grid container with exactly three equal columns, using grid-template-columns: repeat(3, 1fr).
Passes when: Set .gallery to display: grid; Use grid-template-columns: repeat(3, 1fr) for three equal columns.
2.Add breathing room with gapexercise · easy · 15 min · practice plan
This grid's tiles are touching. Add a 16px gap between both rows and columns.
Passes when: Set a gap of at least 16px.
3.Build a responsive card gridexercise · easy · 15 min · practice plan
Make .responsive-grid automatically fit as many 200px-minimum columns as space allows, using grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)).
Passes when: Set .responsive-grid to display: grid.
4.Set explicit row heightsexercise · easy · 15 min · practice plan
Give .layout two rows of exactly 80px each, using grid-template-rows: 80px 80px.
Passes when: Set grid-template-rows: 80px 80px.
5.Center items inside grid cellsexercise · easy · 15 min · practice plan
Center every .icon-grid item, both horizontally and vertically, within its own cell using place-items: center.
Passes when: Center items vertically (align-items: center); Center items horizontally (justify-items: center).
6.Fix the grid that isn't a gridbug fix · easy · 15 min
.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.
Passes when: Change display to grid.
7.Fix the wrong column countbug fix · easy · 15 min · practice plan
This gallery should show 3 columns, but it's only defined with 2. Fix grid-template-columns to create three equal columns.
Passes when: Change grid-template-columns to repeat(3, 1fr).
8.Fix the missing gapbug fix · easy · 15 min · practice plan
This board's cells are touching because gap is set to 0. Give it a 12px gap instead.
Passes when: Set gap to at least 12px.
9.Fix the invalid fr unitbug fix · easy · 15 min · practice plan
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.
Passes when: Fix the unit to 1fr 1fr 1fr.
10.Fix the misaligned badgesbug fix · easy · 15 min · practice plan
.badge-grid's items should be centered in their cells, but align-items is set to stretch. Fix it to center.
Passes when: Change align-items to center.
11.Create a grid containerexercise · easy · 10 min · practice plan
Make #grid a grid container.
Passes when: Make #grid a grid container.
12.Use inline-gridexercise · easy · 10 min · practice plan
Make #grid an inline grid container.
Passes when: Make #grid an inline grid container.
13.Add a gapexercise · easy · 10 min · practice plan
Give the grid a 20px gap.
Passes when: Give the grid a 20px gap.
14.Flow items into columnsexercise · easy · 10 min · practice plan
Set grid-auto-flow to column.
Passes when: Set grid-auto-flow to column.
15.Centre the itemsexercise · medium · 10 min · practice plan
Centre every item on both axes.
Passes when: Centre every item on both axes.
16.Fix the missing displaybug fix · easy · 8 min · practice plan
Grid properties do nothing without display: grid.
Passes when: Grid properties do nothing without display: grid.
17.Fix flex used where grid was meantbug fix · easy · 8 min · practice plan
This layout needs a grid container.
Passes when: This layout needs a grid container.
18.Fix the misspelled valuebug fix · easy · 8 min · practice plan
The value is inline-grid, not grid-inline.
Passes when: The value is inline-grid, not grid-inline.
19.Fix the flow property namebug fix · easy · 8 min · practice plan
The property is grid-auto-flow.
Passes when: The property is grid-auto-flow.
20.Fix the grid set on the itemsbug fix · easy · 8 min · practice plan
The container needs display: grid, not the cells.
Passes when: The container needs display: grid, not the cells.
