<div class="pc-masonry">
<figure style="--h:90px">Linen</figure>
<figure style="--h:130px">Denim</figure>
<figure style="--h:70px">Wool</figure>
<figure style="--h:110px">Canvas</figure>
<figure style="--h:80px">Silk</figure>
<figure style="--h:140px">Cotton</figure>
<figure style="--h:100px">Suede</figure>
<figure style="--h:75px">Twill</figure>
<figure style="--h:120px">Fleece</figure>
</div>About this layout
A staggered gallery of tiles with different heights that flow into three balanced columns using the CSS columns property, with no grid math.
How it works
The wrapper uses the CSS columns property to split its children into three balanced columns, so tiles of different heights stack with no gaps and no grid maths. Each tile gets its height from a --h custom property set inline, and break-inside: avoid stops a tile from being cut across two columns.
Ways to customise it
- Change columns: 3 to 2 or 4 for a different layout.
- Edit the --h values on each figure to reshape the tiles.
- Swap the five pastel backgrounds in the nth-child rules for your palette.
Good to know
Columns fill top to bottom, then left to right, so the reading order of the tiles is by column and not by row. That matters if the order carries meaning. Multi-column layout is supported by every current browser.
Open an example, copy the HTML and the CSS, and paste them into your page. There is nothing to install and no JavaScript to load.