Skip to main content

CSS Grid Container — exercises and bug fixes

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.

Sign in to start solvingCreate a free account

Exercises(10)

  1. 1

    Build a 3-column gallery

    easy15 min

    Make .gallery a grid container with exactly three equal columns, using grid-template-columns: repeat(3, 1fr).

    • Set .gallery to display: grid.
    • Use grid-template-columns: repeat(3, 1fr) for three equal columns.
  2. 2

    Add breathing room with gap

    easy15 min

    This grid's tiles are touching. Add a 16px gap between both rows and columns.

  3. 3

    Build a responsive card grid

    easy15 min

    Make .responsive-grid automatically fit as many 200px-minimum columns as space allows, using grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)).

  4. 4

    Set explicit row heights

    easy15 min

    Give .layout two rows of exactly 80px each, using grid-template-rows: 80px 80px.

  5. 5

    Center items inside grid cells

    easy15 min

    Center every .icon-grid item, both horizontally and vertically, within its own cell using place-items: center.

    • Center items vertically (align-items: center).
    • Center items horizontally (justify-items: center).
  6. 6

    Create a grid container

    easy10 min

    Make #grid a grid container.

  7. 7

    Use inline-grid

    easy10 min

    Make #grid an inline grid container.

  8. 8

    Add a gap

    easy10 min

    Give the grid a 20px gap.

  9. 9

    Flow items into columns

    easy10 min

    Set grid-auto-flow to column.

  10. 10

    Centre the items

    medium10 min

    Centre every item on both axes.

Find the bug(10)

  1. 1

    Fix the grid that isn't a grid

    easy15 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.

  2. 2

    Fix the wrong column count

    easy15 min

    This gallery should show 3 columns, but it's only defined with 2. Fix grid-template-columns to create three equal columns.

  3. 3

    Fix the missing gap

    easy15 min

    This board's cells are touching because gap is set to 0. Give it a 12px gap instead.

  4. 4

    Fix the invalid fr unit

    easy15 min

    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.

  5. 5

    Fix the misaligned badges

    easy15 min

    .badge-grid's items should be centered in their cells, but align-items is set to stretch. Fix it to center.

  6. 6

    Fix the missing display

    easy8 min

    Grid properties do nothing without display: grid.

  7. 7

    Fix flex used where grid was meant

    easy8 min

    This layout needs a grid container.

  8. 8

    Fix the misspelled value

    easy8 min

    The value is inline-grid, not grid-inline.

  9. 9

    Fix the flow property name

    easy8 min

    The property is grid-auto-flow.

  10. 10

    Fix the grid set on the items

    easy8 min

    The container needs display: grid, not the cells.

Ready to write the code?

The editor, the automatic checks and the worked solutions open up with an account.

Open the workspace