.grid { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); grid-template-rows: masonry; }
<div class="grid"> <div class="item" style="block-size: 2em;"></div> <div class="item" style="block-size: 3em; grid-column-end: span 2;"></div> <div class="item" style="block-size: 1.6em;"></div> <div class="item" style="block-size: 4em;"></div> <div class="item" style="block-size: 2.2em; grid-column-end: span 2"></div> <div class="item" style="block-size: 3em;"></div> <div class="item" style="block-size: 4.5em;"></div> <div class="item" style="block-size: 1em;"></div> <div class="item" style="block-size: 3.5em;"></div> <div class="item" style="block-size: 2.8em;"></div> </div>