Skip to main content

CSS Grid Rows — exercises and bug fixes

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

    Define three rows

    easy10 min

    Create rows of 60px, 80px and 100px.

  2. 2

    Use repeat for rows

    easy10 min

    Create three 70px rows with repeat().

  3. 3

    Size implicit rows

    easy10 min

    Let rows be created automatically at 90px each.

  4. 4

    Add a row gap

    easy10 min

    Give the rows a 24px gap.

  5. 5

    Combine rows and auto rows

    medium10 min

    Declare one 50px row and size the rest at 75px.

Find the bug(5)

  1. 1

    Fix columns used instead of rows

    easy8 min

    The tracks were declared on the wrong axis.

  2. 2

    Fix the wrong property

    easy8 min

    The property is grid-auto-rows.

  3. 3

    Fix the comma-separated rows

    easy8 min

    Track sizes are space separated.

  4. 4

    Fix the gap on the wrong axis

    easy8 min

    A gap between rows is row-gap.

  5. 5

    Fix the repeat count

    easy8 min

    There are three items, so three rows are needed.

Ready to write the code?

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

Open the workspace