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

To learn more tips about CSS, make sure to join my newsletter below ❤️