Masonry grid layouts are great when you want to show a lot of content over an entire page or section of a page. JavaScript is a typical go-to for these layouts, and it’s great if you need your content blocks to load left-to-right across the page/section, but if you can live with your content blocks loading top-to-bottom in the columns, the method below is a solid pure CSS option without any JavaScript dependencies. This method also uses media queries to make the column-count responsive across devices.
.masonry-container {
-moz-column-count: 4;
-webkit-column-count: 4;
column-count: 4;
-moz-column-gap: 1rem;
-webkit-column-gap: 1rem;
column-gap: 1rem;
}
.masonry-item {
display: inline-block;
margin: 0 0 1rem;
width: 100%;
}
@media (max-width: 1024px) {
.masonry-container {
-moz-column-count: 3;
-webkit-column-count: 3;
column-count: 3;
}
}
@media (max-width: 768px) {
.masonry-container {
-moz-column-count: 2;
-webkit-column-count: 2;
column-count: 2;
}
}
@media (max-width: 480px) {
.masonry-container {
-moz-column-count: 1;
-webkit-column-count: 1;
column-count: 1;
}
}