Skip to main content

CSS Grid Columns — exercises and bug fixes

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

    easy10 min

    Create columns of 100px and 200px.

  2. 2

    Define three fixed columns

    easy10 min

    Create three 120px columns.

  3. 3

    Use repeat with fixed tracks

    easy10 min

    Use repeat() to make three 90px columns.

  4. 4

    Size implicit columns

    easy10 min

    Flow into columns and size the implicit ones at 80px.

  5. 5

    Mix column widths

    medium10 min

    Create a 150px column followed by a 50px one.

Find the bug(5)

  1. 1

    Fix the comma-separated tracks

    easy8 min

    Track sizes are separated by spaces, not commas.

  2. 2

    Fix the wrong property

    easy8 min

    The property is grid-template-columns.

  3. 3

    Fix the repeat syntax

    easy8 min

    repeat() takes a count then a size, separated by a comma.

  4. 4

    Fix the missing unit

    easy8 min

    A bare number is not a valid track size.

  5. 5

    Fix rows used instead of columns

    easy8 min

    The tracks were declared on the wrong axis.

Ready to write the code?

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

Open the workspace