Skip to main content

CSS Grid Layout Example — exercises and bug fixes

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

    Build a three-column strip

    easy10 min

    Three 100px columns with a 12px gap.

  2. 2

    Build a two-column layout

    easy10 min

    A 200px sidebar and a 300px main column.

  3. 3

    Centre content in every cell

    easy10 min

    Three 100px columns with items centred.

  4. 4

    Add padding around the grid

    easy10 min

    Three columns with 24px padding on the container.

  5. 5

    Compose the full layout

    medium10 min

    Columns, gap, padding and centred items together.

Find the bug(5)

  1. 1

    Fix the missing container

    easy8 min

    The tracks are declared but the element is not a grid.

  2. 2

    Fix place-items misspelled

    easy8 min

    The shorthand is place-items.

  3. 3

    Fix the swapped track sizes

    easy8 min

    The sidebar should be the narrow column.

  4. 4

    Fix padding applied to the cells

    easy8 min

    The spacing belongs on the container.

  5. 5

    Fix the wrong repeat count

    easy8 min

    There should be three columns, not two.

Ready to write the code?

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

Open the workspace