Deconstructed pancake

The deconstructed pancake is the marketing row: three feature cards side by side on a wide screen, two and one when the space tightens, one under another on a phone. It is named on web.dev as one of a set of layout recipes, and the whole recipe is a single flex shorthand. flex: 0 1 <basis> on every child, flex-wrap: wrap on the parent. The basis sets each card’s natural width, wrapping happens when the line runs out, and the zero in front is the part the name is about: growth is switched off, so a card that ends up alone on the last line keeps the width it had rather than swelling to fill the row.

That refusal is the whole design decision, and it is worth being deliberate about it, because the alternative is one character away. Write flex: 1 1 <basis> and the cards grow to fill every line, which means the last line is a card of a different size from the ones above it, usually two or three times as wide. Sometimes that is what you want: a pancake stack fills its region on purpose, and a row of statistics can look better filled than ragged. For cards carrying an image and a heading it is almost always wrong, because the odd one out reads as more important than its peers, and any image inside it is suddenly the wrong shape.

Its nearest neighbour in this vocabulary is the switcher, and the difference is how they respond to shrinking. A switcher flips all or nothing at one threshold: three across becomes three down, with nothing in between. A deconstructed pancake wraps progressively, so it passes through two and one on its way to one per line. A cluster also wraps progressively, but its items are of unequal widths and pack like words in a paragraph, while the pancake’s are equal by construction.

Grid does the same job with a different accent, and the choice between them is a real one. The RAM technique, repeat(auto-fit, minmax(<min>, 1fr)), wraps at a computed threshold and stretches the tracks it has, which means a lone item on the last row spans the whole width: closer to flex: 1 1 than to the pancake. Swap auto-fit for auto-fill and grid keeps the empty tracks instead, so the last item stays its natural size and the row keeps its rhythm, which is the grid spelling of this pattern. Flex wraps by content and cannot align across lines; grid holds a real column structure and can. Pick flex when the cards are a row that happens to wrap, and grid when they are a card grid whose columns should line up.