How to Create a Masonry Grid Image Gallery with HTML & CSS

Are you looking to build a stunning Masonry Grid Image Gallery using just HTML & CSS? 📸✨ In this tutorial, we’ll guide you through creating a fully responsive, stylish, and easy-to-implement image gallery that beautifully arranges images in a masonry layout—no JavaScript needed!

---

🚀 Why Choose a Masonry Grid Layout?

A masonry grid is perfect for showcasing images, whether you’re building a portfolio, photography website, or an e-commerce store. Unlike traditional grids, masonry layouts dynamically arrange images in a visually appealing way, making use of available space efficiently.

✅ Features of This Image Gallery:

✔ Fully Responsive Design – Works on all devices 📱💻
✔ Uses CSS Grid & Flexbox – No JavaScript required
✔ Perfect for Portfolios & Photography Websites 📷
✔ Easy to Customize & Implement 🎨

---

🔥 Step-by-Step Guide to Creating a Masonry Grid Gallery

1️⃣ Setting Up the HTML Structure

Start by creating a simple HTML file and adding a container for your images:

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

---

2️⃣ Styling the Gallery with CSS Grid

Now, let’s add CSS to create the masonry effect:

body {
    font-family: Arial, sans-serif;
    background-color: #f5f5f5;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    margin: 0;
}

.gallery {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    grid-auto-rows: 10px;
    gap: 10px;
    max-width: 800px;
    padding: 10px;
}

.gallery img {
    width: 100%;
    border-radius: 5px;
    object-fit: cover;
    grid-row: span 20;
    transition: transform 0.3s ease-in-out;
}

.gallery img:hover {
    transform: scale(1.05);
}

---

🎯 How It Works

• CSS Grid dynamically arranges images in columns and rows.
• grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); ensures images fit different screen sizes.
• grid-auto-rows: 10px; creates the masonry effect by making row heights flexible.
• grid-row: span 20; ensures images span different rows based on content.
• Hover effect adds a slight zoom when you hover over an image.

---

🌟 Final Thoughts

With just HTML & CSS, you’ve built a beautiful, responsive masonry grid gallery! 🎉 This layout is perfect for showcasing portfolios, blogs, and photography collections without relying on JavaScript.

Want to learn more? Check out our video tutorial:
🎥 Watch the Full Guide on YouTube:

💻 Get the Source Code on GitHub:
🔗 Madras Academy GitHub Repo

🔥 Follow for More Web Development Tutorials!
📌 Don’t forget to LIKE 👍, SHARE 🔄 & SUBSCRIBE 🔔 for more awesome web design content.

Happy Coding! 🚀💻