Skip to main content

CSS Grid Gap — exercises and bug fixes

5 hands-on exercises and 5 find-the-bug challenges for the CSS Grid Gap 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(5)

  1. 1

    Add a uniform gap

    easy10 min

    Give the grid a 16px gap on both axes.

  2. 2

    Different row and column gaps

    easy10 min

    Set a 10px row gap and a 30px column gap with the shorthand.

  3. 3

    Set only the row gap

    easy10 min

    Give the grid a 22px row gap.

  4. 4

    Set only the column gap

    easy10 min

    Give the grid an 18px column gap.

  5. 5

    Use rem for the gap

    medium10 min

    Give the grid a 2rem gap (32px).

Find the bug(5)

  1. 1

    Fix the deprecated grid-gap

    easy8 min

    The modern property is simply gap.

  2. 2

    Fix the reversed shorthand

    easy8 min

    gap takes the row value first, then the column value.

  3. 3

    Fix margins used instead of gap

    easy8 min

    Grid children are spaced with gap.

  4. 4

    Fix the missing unit

    easy8 min

    A bare number is not a valid gap.

  5. 5

    Fix the wrong axis

    easy8 min

    The gap was applied to rows instead of columns.

Ready to write the code?

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

Open the workspace