GitHub 6740★

Have you seen CSS Scan?

The fastest and easiest way to check, copy and edit CSS.

Learn more →

CSS Scan logo

Masonry grid

HTML

<div class="masonry-grid">
<!--Item -->
<div class="masonry-grid__item">...</div>

<!-- Repeat other items -->
</div>

CSS

.masonry-grid {
/* It is split into 3 columns */
column-count: 3;

/* The space between columns */
column-gap: 1rem;
}

.masonry-grid__item {
/* Prevent a column from breaking into multiple columns */
break-inside: avoid;
}
Demo
Follow me on and to get more useful contents.