Wrapping Items

Our cards are 12rem wide (see the rule for .card), but in a narrow preview, they get squeezed. That's because a flex container keeps all its items on one line, and when they don't fit, it shrinks them, even below their width. And when they can't shrink any further (roughly to the width of their longest word), they stick out of the container.

Usually, it's better to keep the cards' width and move the ones that don't fit to the next line, just like words in a paragraph. This is set by the flex-wrap property of the flex container:

• nowrap: all items stay on one line. This is the default.
• wrap: the items that don't fit move to the next line.

The gap set by gap applies between the lines too. (If you ever need a different gap between the lines than between the items, there are the properties row-gap and column-gap.)

How many cards fit on one line depends on the width of the preview. If all four fit side by side in yours, make your browser window narrower and watch them wrap.