The problem
You want a Pinterest-style layout where items stack vertically in columns without gaps.
The solution
/* CSS Columns approach (best support) */
.masonry-columns {
column-count: 4;
column-gap: 20px;
}
.masonry-columns .item {
break-inside: avoid;
margin-bottom: 20px;
background: #1a1a2e;
border-radius: 12px;
overflow: hidden;
}
/* Responsive columns */
@media (max-width: 1200px) {
.masonry-columns { column-count: 3; }
}
@media (max-width: 900px) {
.masonry-columns { column-count: 2; }
}
@media (max-width: 600px) {
.masonry-columns { column-count: 1; }
}
/* CSS Grid approach (experimental) */
.masonry-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
grid-auto-rows: 10px;
gap: 20px;
}
.masonry-grid .item {
/* Set via JavaScript or manually */
grid-row-end: span var(--row-span, 20);
background: #1a1a2e;
border-radius: 12px;
}See it live
Put it to work
<!-- Columns approach -->
<div class="masonry-columns">
<div class="item" style="height: 200px;">1</div>
<div class="item" style="height: 150px;">2</div>
<div class="item" style="height: 300px;">3</div>
<div class="item" style="height: 180px;">4</div>
<div class="item" style="height: 250px;">5</div>
</div>Worth knowing
CSS columns work top-to-bottom per column, not left-to-right. True masonry may need JavaScript.