GitHub 6956★

Have you seen CSS Scan?

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

Learn more →

CSS Scan logo

Masonry grid


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

<!-- Repeat other items -->


.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;
Follow me on and to get more useful contents.