Build a Masonry Layout with Pure CSS column-width

You only need a few CSS lines to build a Masonry layout.

Here’s how it works: The magic happens with the column-width property.

.columns {
	width: 100%;
	column-width: 200px;
	gap: 1em;
}

This tells the browser: “Fit as many 200px-wide columns as you can into this container.”

If the screen is wider, more columns fit. On smaller screens, fewer columns show.

The gap sets the horizontal spacing between them.

The rest is just good styling:

• Images set to width: 100% so they fill the column
• object-fit: cover to keep them visually balanced
• A bit of padding, rounded corners, and borders for aesthetics

No position hacks. No flex/grid juggling. Just native CSS doing the heavy lifting.

And it adapts instantly when you resize the container.

Link to the codepen: https://codepen.io/theosoti/pen/ogXedrz

If you liked this tip, you might enjoy the book, which is packed with similar insights to help you build better websites without relying on JavaScript.

Go check it out https://theosoti.com/you-dont-need-js/ and enjoy 20% OFF for a limited time!