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! 🚀💻