Masonry layout is a popular technique that involves arranging items in a staggered grid (e.g., Pinterest). While I was looking to build a masonry layout, I found a couple of solutions that involved using libraries like Masonry & MiniMasonry. These required using Javascript, but I believe most of the layout should be created using CSS with minimal JS code. So in this post, I will highlight how to implement masonry layout using only CSS.

CSS now has a native way to build masonry layouts using CSS Grids. But it is only available behind a flag on Firefox. It will take some time to land in all the browsers. So we will be using this along with column layout as a fallback.

Code

First, let’s create the HTML template.

<div class="container">
	<div class="masonry-item">
		<!-- add elements here  -->
	</div>

	<div class="masonry-item">
		<!-- add elements here  -->
	</div>
</div>

Here we will be applying styles to the container class.

We will be checking if the browser supports particular CSS property using a feature query that uses the at-rule @supports. So we can check if the browser supports grid-template-rows: masonry and load those styles.

.container {
	--masonry-columns: 4;
	--masonry-gap: 1rem;
}

@supports (grid-template-rows: masonry) {
	.container {
		display: grid;
		grid-template-columns: repeat(var(--masonry-columns), 1fr);
		grid-gap: var(--masonry-gap);
		grid-template-rows: masonry;
	}

	.container > * {
		margin-bottom: 0;
	}
}

I’m using CSS custom properties for defining the number of columns and spacing between each masonry cell. It will help us in

• Using the same variables for the main layout and the fallback.
• We can change the custom properties value in the media query for responsive layout.

@media (min-width: 630px) {
	.container {
		--masonry-columns: 2;
		--masonry-gap: 0.5rem;
	}
}

Bamn, now we have 2 column masonry layout on-screen sizes less than 630px.

Since grid-template-rows: masonry won’t work on most browsers, we need an alternate way to create the masonry layout. Here, we will use the CSS column layout as a fallback.

/* fallback */
.container {
	column-count: var(--masonry-columns);
	column-gap: var(--masonry-gap);
}

.container > * {
	margin-bottom: var(--masonry-gap);
	break-inside: avoid;
}

Here’s the link to the codepen to try it out.