Build a Pinterest-style masonry grid using the widely-supported CSS columns technique. Tune columns, gap, radius and shadow, then copy clean HTML and CSS.
Ten variable-height cards show exactly how the columns technique packs content.
Fix an exact column count, or let column-width decide how many columns fit.
Pure CSS columns — no JavaScript required to compute item positions.
Get a ready-to-use masonry container and item markup with matching CSS.
This generator builds masonry using CSS multi-column layout — the columns or column-width property applied to a container, with each child item given break-inside:avoid so it never splits across columns. Items flow down one column top-to-bottom before continuing in the next column, which is what creates the packed, uneven-height Pinterest look with zero JavaScript. It's worth knowing this reading order differs from grid-based masonry: content fills column-by-column (down, then across) rather than row-by-row (across, then down), which matters if item order carries meaning. A newer native option, grid-template-rows: masonry, is being standardized in CSS Grid Level 3, but it isn't broadly supported across browsers yet, so the columns technique remains the practical, widely-compatible choice today.
Fix an exact number of columns, or let the browser compute the count from a minimum width — useful for fully responsive grids.
This one declaration is what stops a card from being sliced in half between two columns.
Because items fill top-to-bottom per column, the visual order can look shuffled compared to a JS-computed masonry grid.
A newer CSS Grid masonry mode exists in the spec but isn't broadly supported yet, so it's not used here.
It uses the CSS multi-column technique (the columns property), where items flow down each column and wrap to the next, producing the classic Pinterest-style packed look without JavaScript.
Yes, grid-template-rows: masonry is being standardized, but it isn't broadly supported across browsers yet, so the widely-compatible columns technique is used here.
Yes. Switch the mode toggle to min-width, and columns will be generated automatically using CSS column-width based on your chosen minimum.
With CSS columns, items fill one column top-to-bottom before moving to the next column, which differs from grid-based masonry libraries that fill left-to-right. This is called out in the about section below.
Keep building photo and grid layouts with these free tools.