How to Create a Masonry Gallery with HTML and CSS

A masonry gallery is a visually appealing grid layout where images of different sizes are arranged in a structured yet flexible way. This type of gallery is often used in photography websites, blogs, and portfolios. In this guide, we’ll show you how to create a responsive masonry gallery using only HTML and CSS, without relying on JavaScript or external libraries.

1. Understanding Masonry Layout

What Is a Masonry Gallery?

A masonry gallery is different from a standard grid because it allows items to be placed dynamically, filling available spaces without maintaining a fixed row structure. This makes it perfect for displaying images of varying heights while keeping an organized look.

Why Use Masonry Layout?

Creates a modern and stylish appearance
Optimizes space and makes the gallery look balanced
Works well for image-heavy websites

2. Setting Up the HTML Structure

To create the gallery, we need a simple HTML structure. Each image will be inside a <div> container, wrapped inside a parent <div> called gallery.

htmlCopyEdit<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Masonry Gallery</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="gallery">
        <div class="item"><img src="image1.jpg" alt="Gallery Image 1"></div>
        <div class="item"><img src="image2.jpg" alt="Gallery Image 2"></div>
        <div class="item"><img src="image3.jpg" alt="Gallery Image 3"></div>
        <div class="item"><img src="image4.jpg" alt="Gallery Image 4"></div>
        <div class="item"><img src="image5.jpg" alt="Gallery Image 5"></div>
    </div>
</body>
</html>

3. Styling the Masonry Gallery with CSS

Now that we have the HTML structure, we’ll use CSS Grid to create a masonry effect.

Basic Styling for the Gallery

First, we apply basic styles to make the images responsive and aligned correctly.

cssCopyEditbody {
    font-family: Arial, sans-serif;
    background-color: #f9f9f9;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    padding: 20px;
}

.gallery {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 10px;
    width: 90%;
    max-width: 1200px;
}

.item img {
    width: 100%;
    height: auto;
    border-radius: 5px;
}

Creating the Masonry Effect

To allow images to stack dynamically like a masonry layout, we use CSS columns instead of standard grid rows.

cssCopyEdit.gallery {
    column-count: 3;
    column-gap: 10px;
}

.item {
    display: inline-block;
    margin-bottom: 10px;
    width: 100%;
}

Making the Gallery Responsive

To ensure the masonry gallery looks great on all devices, we can adjust the number of columns dynamically.

cssCopyEdit@media (max-width: 768px) {
    .gallery {
        column-count: 2;
    }
}

@media (max-width: 480px) {
    .gallery {
        column-count: 1;
    }
}

4. Final Thoughts

By combining HTML, CSS Grid, and CSS columns, you can easily create a beautiful masonry gallery without JavaScript. This method ensures the gallery remains lightweight, fast, and responsive across different devices.

If this guide seems too complex or time-consuming, I can help! I offer professional web development services to create stunning, responsive websites tailored to your needs. Contact me today to get started!