Masonry Layout in CSS
Build a Pinterest-style masonry layout with CSS only: cards of different heights packed into columns, with no ragged gaps under the shorter ones. The markup and a plain grid are in the starter. The grid makes each row as tall as its tallest card, which is the problem to fix.
Requirements
- Cards pack tightly down each column.
- The column count adapts to the width, from 1 on a phone to at most 4.
- Gutters are even, horizontally and vertically.
- No card is ever split across two columns.
- Change only
styles.css.
Hints
Hint 1
CSS multi-column layout (columns) flows content down one column and into the next, which is masonry-shaped packing for free.
Hint 2
columns: 220px 4 means columns at least 220px wide, and at most four of them. The browser picks the count from the width, with no media queries.
Hint 3
In a multi-column container, the vertical gutter is each card's bottom margin, and break-inside: avoid keeps a card whole.