Build a three-column strip — practice exercise

What you'll be asked to do

1. 1.Build a three-column stripexercise · easy · 10 min

   Three 100px columns with a 12px gap.

   Passes when: Three 100px columns with a 12px gap.

2. 2.Build a two-column layoutexercise · easy · 10 min · practice plan

   A 200px sidebar and a 300px main column.

   Passes when: A 200px sidebar and a 300px main column.

3. 3.Centre content in every cellexercise · easy · 10 min · practice plan

   Three 100px columns with items centred.

   Passes when: Three 100px columns with items centred.

4. 4.Add padding around the gridexercise · easy · 10 min · practice plan

   Three columns with 24px padding on the container.

   Passes when: Three columns with 24px padding on the container.

5. 5.Compose the full layoutexercise · medium · 10 min · practice plan

   Columns, gap, padding and centred items together.

   Passes when: Columns, gap, padding and centred items together.

6. 6.Fix the missing containerbug fix · easy · 8 min

   The tracks are declared but the element is not a grid.

   Passes when: The tracks are declared but the element is not a grid.

7. 7.Fix place-items misspelledbug fix · easy · 8 min · practice plan

   The shorthand is place-items.

   Passes when: The shorthand is place-items.

8. 8.Fix the swapped track sizesbug fix · easy · 8 min · practice plan

   The sidebar should be the narrow column.

   Passes when: The sidebar should be the narrow column.

9. 9.Fix padding applied to the cellsbug fix · easy · 8 min · practice plan

   The spacing belongs on the container.

   Passes when: The spacing belongs on the container.

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

    There should be three columns, not two.

    Passes when: There should be three columns, not two.

Between them these tasks cover Composing a grid, Tracks with gaps and Alignment.

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