A grid that reflows

Level 7 of 10

Your goal

The grid has two 100px columns and a 20px gap. From a 600px viewport up, switch to three 100px columns. Expected: on the 420px stage C wraps to a second row; on the 700px stage A, B and C share one row (C at x = 240).

Must usegrid-template-columns

Checked at 2 stage widths (420px, 700px) — every stage below has to match.

Elements

Hover one to find it on the stage. Click it, or put your cursor inside its CSS rule, to focus on just that element.

stage 420px

stage 700px

target content boxtarget outer edge (green = matched, red = not yet)your element (hovered or focused)

Feedback updates as you type, and your CSS is saved in this browser. Exact target numbers are in the Target panel.