Skip to main content

Multi-column Layout — exercises and bug fixes

5 hands-on exercises and 5 find-the-bug challenges for the Multi-column Layout 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

    Split into columns

    easy10 min

    Give #wrap three columns.

  2. 2

    Size the columns

    easy10 min

    Give #wrap a 200px column width.

  3. 3

    Add a column gap

    easy10 min

    Give #wrap a 30px column gap.

  4. 4

    Add a divider rule

    easy10 min

    Add a 2px solid rule between columns.

  5. 5

    Span all columns

    medium10 min

    Make #box span every column.

Find the bug(5)

  1. 1

    Fix the misspelled property

    easy8 min

    The property is column-count.

  2. 2

    Fix the missing unit

    easy8 min

    column-width needs a unit.

  3. 3

    Fix the rule with no style

    easy8 min

    Without a style the column rule has no width.

  4. 4

    Fix the gap property

    easy8 min

    The gap between columns is column-gap.

  5. 5

    Fix the span value

    easy8 min

    Spanning every column uses the value all.

Ready to write the code?

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

Open the workspace