Let’s bring CSS Grid to life by building a real project! 😎
📘 LESSON 12: Project – Build a CSS Grid Photo Gallery
✅ Learning Goals:
- Use CSS Grid for responsive layouts
- Build a beautiful photo gallery
- Practice
auto-fit,minmax, andgap - Explore real-world design structure
🧾 Lesson Content (Text for Website)
🖼️ Project Overview
We’ll create a responsive photo gallery with Grid.
This layout is perfect for portfolios, image showcases, and product thumbnails.
🧱 File Structure
/grid-gallery
├── index.html
└── style.css
💻 HTML Code (index.html)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>Grid Gallery</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<section class="gallery-container">
<h1>📸 My Photo Gallery</h1>
<div class="gallery-grid">
<img src="https://picsum.photos/300?random=1" alt="Gallery Image" />
<img src="https://picsum.photos/300?random=2" alt="Gallery Image" />
<img src="https://picsum.photos/300?random=3" alt="Gallery Image" />
<img src="https://picsum.photos/300?random=4" alt="Gallery Image" />
<img src="https://picsum.photos/300?random=5" alt="Gallery Image" />
<img src="https://picsum.photos/300?random=6" alt="Gallery Image" />
<img src="https://picsum.photos/300?random=7" alt="Gallery Image" />
<img src="https://picsum.photos/300?random=8" alt="Gallery Image" />
</div>
</section>
</body>
</html>
🎨 CSS Code (style.css)
body {
font-family: sans-serif;
background: #f9f9f9;
margin: 0;
padding: 0;
}
.gallery-container {
padding: 40px 20px;
text-align: center;
}
h1 {
margin-bottom: 30px;
color: #ff6f00;
}
.gallery-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 20px;
}
.gallery-grid img {
width: 100%;
border-radius: 10px;
box-shadow: 0 4px 10px rgba(0,0,0,0.1);
transition: transform 0.3s ease;
}
.gallery-grid img:hover {
transform: scale(1.05);
}
📱 Responsive By Design
Thanks to repeat(auto-fit, minmax(...)), the gallery:
- Adapts to screen width
- Maintains image proportions
- Looks great on desktop, tablet, and mobile
🧪 Practice Challenges
Try these extras:
- Add lightbox functionality
- Group images by category
- Add image captions or hover effects
- Make it a portfolio section for your personal site
💡 Pro Tips
| Feature | Technique |
|---|---|
| Even columns | repeat(3, 1fr) |
| Auto fit items | auto-fit + minmax() |
| Image scaling | hover + transform: scale() |
| Responsive | Grid adapts to screen size |
📌 Summary
- CSS Grid makes building responsive galleries simple and powerful
- The
auto-fittrick ensures it works on all devices - Hover effects add life to the layout
- This is production-ready code!
📹 Bonus (Optional)
Add a YouTube embed or GIF to show the gallery in action 🎞️
One Response