Name a single row of areas — practice exercise

What you'll be asked to do

1. 1.Name a single row of areasexercise · easy · 10 min

   Define one row with three named areas.

   Passes when: Define one row with three named areas.

2. 2.Define two rows of areasexercise · easy · 10 min · practice plan

   Define two rows: header spanning, then two cells.

   Passes when: Define two rows: header spanning, then two cells.

3. 3.Assign an item to an areaexercise · easy · 10 min · practice plan

   Put every cell in the area named a.

   Passes when: Put every cell in the area named a.

4. 4.Flow items denselyexercise · easy · 10 min · practice plan

   Set grid-auto-flow to row dense.

   Passes when: Set grid-auto-flow to row dense.

5. 5.Combine areas and gapexercise · medium · 10 min · practice plan

   Define named areas with a 12px gap.

   Passes when: Define named areas with a 12px gap.

6. 6.Fix the unquoted area rowbug fix · easy · 8 min

   Each row of areas must be a quoted string.

   Passes when: Each row of areas must be a quoted string.

7. 7.Fix the uneven area rowsbug fix · easy · 8 min · practice plan

   Every row must declare the same number of columns.

   Passes when: Every row must declare the same number of columns.

8. 8.Fix the wrong property for itemsbug fix · easy · 8 min · practice plan

   An item is placed with grid-area.

   Passes when: An item is placed with grid-area.

9. 9.Fix the dense keywordbug fix · easy · 8 min · practice plan

   The value is "row dense", written in that order.

   Passes when: The value is "row dense", written in that order.

10. 10.Fix the comma between area rowsbug fix · easy · 8 min · practice plan

    Area rows are separated by whitespace, not commas.

    Passes when: Area rows are separated by whitespace, not commas.

Between them these tasks cover grid-template-areas, grid-area and Auto placement.

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