Skip to main content

CSS Subgrid — exercises and bug fixes

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

    Make the child a grid

    easy10 min

    Turn .cell into its own grid container.

  2. 2

    Inherit the parent columns

    easy10 min

    Use subgrid so .cell reuses the parent's column tracks.

  3. 3

    Span the parent tracks

    easy10 min

    Make .cell span both parent columns.

  4. 4

    Subgrid the rows

    easy10 min

    Use subgrid on the row axis.

  5. 5

    Subgrid with a gap

    medium10 min

    Subgrid the columns and add a 10px gap inside.

Find the bug(5)

  1. 1

    Fix the missing nested grid

    easy8 min

    subgrid only works on a grid container.

  2. 2

    Fix the misspelled keyword

    easy8 min

    The value is subgrid, not sub-grid.

  3. 3

    Fix the axis

    easy8 min

    The subgrid was declared on columns but rows were intended.

  4. 4

    Fix the missing span

    easy8 min

    A subgrid must span the parent tracks it inherits.

  5. 5

    Fix the gap on the wrong element

    easy8 min

    The inner gap belongs on the subgrid container.

Ready to write the code?

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

Open the workspace