Creating a Responsive Masonry Layout with CSS Columns, Grid, and Flexbox

In this tutorial the author demonstrates how to achieve a "waterfall" or masonry layout for images of varying sizes without relying on JavaScript, by using the CSS columns property.

The article first shows the typical expectation of using flex or grid , which often requires many media queries and extra markup, and then introduces the much simpler column‑based solution.

Using column-count: 3 (or columns: 300px ) the images are automatically distributed into three vertical columns, preserving their original aspect ratios while filling empty space. A single line of CSS is enough to create the layout.

Responsive behavior is added with a single @media rule that changes the column count for smaller screens, e.g.:

@media screen and (max-width: 600px) {
  .layout-container {
    column-count: 2;
  }
}

Further customization is possible with the shorthand columns: 300px 3 , which forces three columns of 300 px width while still being responsive.

The article also provides brief grid and flex examples for comparison, showing how those approaches can lead to stretched images or excessive whitespace.

Drawbacks of the column method are noted: the layout orders items top‑to‑bottom, which may not suit dynamic loading scenarios, and large lists can cause performance issues due to continuous layout calculations.

Compatibility information is supplied, confirming that column-count and columns have been widely supported across browsers since early 2017.

Finally, the author invites readers to star the GitHub repository and leave comments if the guide was helpful.