Add a uniform gap — practice exercise

What you'll be asked to do

1. 1.Add a uniform gapexercise · easy · 10 min

   Give the grid a 16px gap on both axes.

   Passes when: Give the grid a 16px gap on both axes.

2. 2.Different row and column gapsexercise · easy · 10 min · practice plan

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

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

3. 3.Set only the row gapexercise · easy · 10 min · practice plan

   Give the grid a 22px row gap.

   Passes when: Give the grid a 22px row gap.

4. 4.Set only the column gapexercise · easy · 10 min · practice plan

   Give the grid an 18px column gap.

   Passes when: Give the grid an 18px column gap.

5. 5.Use rem for the gapexercise · medium · 10 min · practice plan

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

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

6. 6.Fix the deprecated grid-gapbug fix · easy · 8 min

   The modern property is simply gap.

   Passes when: The modern property is simply gap.

7. 7.Fix the reversed shorthandbug fix · easy · 8 min · practice plan

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

   Passes when: gap takes the row value first, then the column value.

8. 8.Fix margins used instead of gapbug fix · easy · 8 min · practice plan

   Grid children are spaced with gap.

   Passes when: Grid children are spaced with gap.

9. 9.Fix the missing unitbug fix · easy · 8 min · practice plan

   A bare number is not a valid gap.

   Passes when: A bare number is not a valid gap.

10. 10.Fix the wrong axisbug fix · easy · 8 min · practice plan

    The gap was applied to rows instead of columns.

    Passes when: The gap was applied to rows instead of columns.

Between them these tasks cover gap shorthand and row-gap and column-gap.

Looking for a different chapter? See every practice set, or switch to the interview theory questions.