Skip to main content

Grid Placement — exercises and bug fixes

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

    Span two columns

    easy10 min

    Make every cell span two columns.

  2. 2

    Start at a specific line

    easy10 min

    Place the cells starting at column line 2.

  3. 3

    Span two rows

    easy10 min

    Make every cell span two rows.

  4. 4

    Place with start and end

    easy10 min

    Place cells from column line 1 to line 3.

  5. 5

    Align one item

    medium10 min

    Use justify-self to push cells to the end of their track.

Find the bug(5)

  1. 1

    Fix the missing span keyword

    easy8 min

    Spanning tracks needs the span keyword.

  2. 2

    Fix the wrong axis

    easy8 min

    The span was applied to rows instead of columns.

  3. 3

    Fix the placement on the container

    easy8 min

    grid-column applies to items, not the container.

  4. 4

    Fix the wrong separator

    easy8 min

    A start/end range uses a slash.

  5. 5

    Fix justify-items used on an item

    easy8 min

    An individual item uses justify-self.

Ready to write the code?

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

Open the workspace