Teaching step

flex-wrap: wrap turns one line into many

EasyWrapping and the align-content trapF30

A card grid that looked fine with four cards. The fifth did not go to a new row — every card just got narrower, and by the ninth they were slivers.

Six cells, each 160 × 100, in a 540px grid with a 30px gap. Three of them fit across. Make them lay out as two rows of three, cells at their full size, the first three on top. The starter makes the grid a flex container and nothing else. What it renders is flexbox's actual default behaviour, and it is worth seeing once.

Hint

The starter did not overflow and it did not wrap. What did it do to the cells instead, and what does that tell you flexbox thinks a line is?

Live preview800×400

Your stylesheet

checked in a real browser, four ways

The fixture — markup and base stylesheet

You cannot change either of these. They are what your selectors have to reach, and they are the same ones the judge renders.

<div class="grid"><div class="cell n1"></div><div class="cell n2"></div><div class="cell n3"></div><div class="cell n4"></div><div class="cell n5"></div><div class="cell n6"></div></div>

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body { background: #0b0b0f; }
.grid { width: 540px; height: 230px; background: #16161d; gap: 30px; }
.cell { width: 160px; height: 100px; background: #ffd166; }
.n1 { background: #7bdff2; }
.n4 { background: #b5e48c; }