Skip to main content

Grid Areas — exercises and bug fixes

5 hands-on exercises and 5 find-the-bug challenges for the Grid Areas 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

    Name a single row of areas

    easy10 min

    Define one row with three named areas.

  2. 2

    Define two rows of areas

    easy10 min

    Define two rows: header spanning, then two cells.

  3. 3

    Assign an item to an area

    easy10 min

    Put every cell in the area named a.

  4. 4

    Flow items densely

    easy10 min

    Set grid-auto-flow to row dense.

  5. 5

    Combine areas and gap

    medium10 min

    Define named areas with a 12px gap.

Find the bug(5)

  1. 1

    Fix the unquoted area row

    easy8 min

    Each row of areas must be a quoted string.

  2. 2

    Fix the uneven area rows

    easy8 min

    Every row must declare the same number of columns.

  3. 3

    Fix the wrong property for items

    easy8 min

    An item is placed with grid-area.

  4. 4

    Fix the dense keyword

    easy8 min

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

  5. 5

    Fix the comma between area rows

    easy8 min

    Area rows are separated by whitespace, not commas.

Ready to write the code?

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

Open the workspace