How to Create a CSS Masonry Layout Without JavaScript

A masonry layout is a popular design pattern where elements are arranged in a brick - like fashion, with items flowing vertically in columns of varying heights. Traditionally, achieving a masonry layout often required JavaScript to calculate and position elements precisely. However, with modern CSS features, it’s now possible to create a CSS masonry layout without relying on JavaScript. This blog post will guide you through the process of creating such a layout, covering fundamental concepts, usage methods, common practices, and best practices.

Table of Contents

  1. Fundamental Concepts
  2. Usage Methods
  3. Common Practices
  4. Best Practices
  5. Conclusion
  6. Reference

Fundamental Concepts

CSS Columns

The core concept behind a CSS - only masonry layout is the use of the columns property. The columns property is a shorthand for column - width and column - count. It allows you to divide an element’s content into multiple columns. When you use the columns property on a container element, its child elements will automatically flow into these columns, creating a multi - column layout. The items will stack vertically within each column, mimicking a masonry effect.

Flow of Elements

By default, when using the columns property, elements will flow from top - to - bottom and then left - to - right. This means that the items will first fill one column before moving on to the next, which is ideal for creating a masonry layout where items are arranged in columns of different heights.

Usage Methods

HTML Structure

First, let’s set up a simple HTML structure for our masonry layout. Assume we are creating a photo gallery as an example.

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="styles.css">
</head>

<body>
    <div class="masonry">
        <div class="item"><img src="image1.jpg" alt="Image 1"></div>
        <div class="item"><img src="image2.jpg" alt="Image 2"></div>
        <div class="item"><img src="image3.jpg" alt="Image 3"></div>
        <div class="item"><img src="image4.jpg" alt="Image 4"></div>
        <div class="item"><img src="image5.jpg" alt="Image 5"></div>
        <div class="item"><img src="image6.jpg" alt="Image 6"></div>
    </div>
</body>

</html>

CSS Styling

In the styles.css file, we’ll use the columns property to create the masonry layout.

.masonry {
    columns: 3; /* You can adjust the number of columns as needed */
    column-gap: 10px; /* Set the gap between columns */
}

.item {
    margin-bottom: 10px; /* Add some space between items */
    break-inside: avoid; /* Prevent items from being split across columns */
}

.item img {
    width: 100%;
    height: auto;
}

In the above code, the .masonry class is used as the container for the masonry layout. The columns: 3 sets the number of columns to 3. The column - gap property adds some space between the columns. The break - inside: avoid rule on the .item class ensures that each item stays within a single column and is not split across columns.

Common Practices

Responsive Design

To make the masonry layout responsive, you can use media queries to adjust the number of columns based on the screen size.

.masonry {
    columns: 1;
    column-gap: 10px;
}

.item {
    margin-bottom: 10px;
    break-inside: avoid;
}

.item img {
    width: 100%;
    height: auto;
}

@media (min-width: 768px) {
    .masonry {
        columns: 2;
    }
}

@media (min-width: 1024px) {
    .masonry {
        columns: 3;
    }
}

In this example, on smaller screens, the layout will have 1 column. As the screen size increases, the number of columns will be adjusted to 2 and then 3.

Using Flexbox or Grid for Wrapping

Sometimes, you may want to use Flexbox or Grid on the parent container to handle the overall layout and spacing. For example, if you want to center the masonry layout on the page:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            margin: 0;
        }

       .masonry {
            columns: 3;
            column-gap: 10px;
        }

       .item {
            margin-bottom: 10px;
            break-inside: avoid;
        }

       .item img {
            width: 100%;
            height: auto;
        }
    </style>
</head>

<body>
    <div class="masonry">
        <div class="item"><img src="image1.jpg" alt="Image 1"></div>
        <div class="item"><img src="image2.jpg" alt="Image 2"></div>
        <div class="item"><img src="image3.jpg" alt="Image 3"></div>
        <div class="item"><img src="image4.jpg" alt="Image 4"></div>
        <div class="item"><img src="image5.jpg" alt="Image 5"></div>
        <div class="item"><img src="image6.jpg" alt="Image 6"></div>
    </div>
</body>

</html>

Here, the body element uses Flexbox to center the .masonry container both horizontally and vertically on the page.

Best Practices

Performance Considerations

  • Limit the Number of Columns: Too many columns can lead to a poor user experience, especially on smaller screens. Keep the number of columns reasonable and adjust them according to the screen size.
  • Optimize Images: Compress and optimize images to reduce the page load time. Use modern image formats like WebP where possible.
  • Use break - inside: avoid: As shown in the previous examples, using break - inside: avoid on the items ensures that they are not split across columns, which can lead to a more visually appealing layout.

Accessibility

  • Semantic HTML: Use proper HTML elements and ARIA (Accessible Rich Internet Applications) attributes to make the layout accessible. For example, using <figure> and <figcaption> for images and their descriptions.
  • Color Contrast: Ensure that there is sufficient color contrast between text and background colors for readability.

Conclusion

Creating a CSS masonry layout without JavaScript is not only possible but also relatively straightforward. By leveraging the columns property and related CSS features, you can achieve an aesthetically pleasing and responsive masonry layout. The common and best practices discussed in this blog, such as responsive design, performance optimization, and accessibility, will help you create high - quality layouts. With these techniques, you can efficiently build modern and engaging web pages without the complexity of JavaScript.

Reference