Let’s begin with Lecture 47 of the HTML5 & CSS3 series. Real-World Projects with CSS Grid & Flexbox – Responsive Image Gallery, Card Layout & Navigation Bar. This lecture is for absolute beginners; even kids can follow along and understand.
🎯 Objective:
By the end of this lecture, you will:
- Build real-world layouts using CSS Grid and Flexbox
- Create a responsive image gallery , a card layout , and a navigation bar
- Know when to use Grid vs Flexbox in different parts of your page
- Make your website adapt beautifully across desktops, tablets, and phones
- Have practical templates you can reuse in your own projects!
🧱 When to Use Grid or Flexbox?
| FEATURE | BEST TOOL |
|---|---|
| One-dimensional (rows or columns) | ✅ Flexbox |
| Two-dimensional (rows AND columns) | ✅ Grid |
| Equal spacing between items | ✅ Flexbox (gap) |
| Complex layouts (dashboards, magazines) | ✅ Grid |
| Aligning buttons or nav links | ✅ Flexbox |
| Masonry-style layouts | ✅ Grid +grid-auto-flow |
Think of it like this:
If you’re building a bookshelf , Flexbox helps align books on one shelf.
If you’re arranging multiple shelves , then Grid is your blueprint.
💻 Try This: Build a Responsive Image Gallery with CSS Grid
Let’s create a responsive image gallery that adjusts automatically to screen size.
Step 1: Create a New File
In your VS Code project folder (MyFirstWebsite), create a new file named:
image-gallery.htmlStep 2: Add This Code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>Responsive Image Gallery</title>
<style>
body {
margin: 0;
font-family: Arial, sans-serif;
background-color: #f9f9f9;
padding: 40px;
}
h2 {
text-align: center;
margin-bottom: 30px;
}
.gallery {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 15px;
}
.gallery img {
width: 100%;
height: auto;
border-radius: 8px;
object-fit: cover;
transition: transform 0.3s ease;
}
.gallery img:hover {
transform: scale(1.05);
}
</style>
</head>
<body>
<h2>Responsive Image Gallery</h2>
<div class="gallery">
<img src="https://picsum.photos/id/1015/300/200 " alt="Nature">
<img src="https://picsum.photos/id/1016/300/200 " alt="Mountains">
<img src="https://picsum.photos/id/1018/300/200 " alt="City">
<img src="https://picsum.photos/id/1025/300/200 " alt="Beach">
<img src="https://picsum.photos/id/1033/300/200 " alt="Forest">
<img src="https://picsum.photos/id/1035/300/200 " alt="People">
</div>
<p style="text-align: center; margin-top: 30px;">
<a href="index.html">Back to Home</a>
</p>
</body>
</html>Step 3: Run with Live Server
Right-click the code → Show All Commands → Launch Live Server
🎉 You’ve built a fully responsive image gallery — it adapts to any screen size!
💡 Bonus: Add Captions Below Each Image
Update your HTML like this:
<div class="gallery">
<div class="gallery-item">
<img src="https://picsum.photos/id/1015/300/200 " alt="Nature">
<p class="caption">Nature Scene</p>
</div>
<!-- Repeat for other images -->
</div>Add this CSS:
.gallery-item {
display: flex;
flex-direction: column;
align-items: center;
background-color: white;
padding: 10px;
border-radius: 10px;
}
.caption {
margin-top: 10px;
text-align: center;
font-size: 14px;
color: #555;
}Now each image has a caption and looks more professional!
💻 Try This: Build a Card Layout with Flexbox
Let’s build a flexible card layout that stacks cards vertically on small screens.
Step 1: Create a New File
Create a new file named:
flex-card-layout.htmlStep 2: Add This Code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>Flexbox Card Layout</title>
<style>
body {
margin: 0;
font-family: Arial, sans-serif;
background-color: #f4f4f4;
padding: 40px;
}
h2 {
text-align: center;
margin-bottom: 30px;
}
.card-container {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 20px;
}
.card {
background-color: white;
border-radius: 8px;
box-shadow: 0 2px 6px rgba(0,0,0,0.1);
width: 300px;
overflow: hidden;
transition: transform 0.3s ease;
}
.card:hover {
transform: scale(1.03);
}
.card img {
width: 100%;
height: 180px;
object-fit: cover;
}
.card-body {
padding: 15px;
}
@media (max-width: 768px) {
.card {
width: 100%;
}
}
</style>
</head>
<body>
<h2>My Flexbox Card Layout</h2>
<div class="card-container">
<!-- Card 1 -->
<div class="card">
<img src="https://picsum.photos/id/1015/300/180 " alt="Card Image">
<div class="card-body">
<h3>Card Title 1</h3>
<p>This is a sample card built using Flexbox.</p>
</div>
</div>
<!-- Card 2 -->
<div class="card">
<img src="https://picsum.photos/id/1016/300/180 " alt="Card Image">
<div class="card-body">
<h3>Card Title 2</h3>
<p>Flexbox makes it easy to arrange cards responsively!</p>
</div>
</div>
<!-- Card 3 -->
<div class="card">
<img src="https://picsum.photos/id/1018/300/180 " alt="Card Image">
<div class="card-body">
<h3>Card Title 3</h3>
<p>You can make your layout look beautiful on all devices.</p>
</div>
</div>
</div>
<p style="text-align: center; margin-top: 30px;">
<a href="index.html">Back to Home</a>
</p>
</body>
</html>Step 3: Run with Live Server
Right-click the code → Show All Commands → Launch Live Server
🎉 You’ve built a flexible card layout that looks great on both desktop and mobile!
💻 Try This: Build a Responsive Navbar with Flexbox
Let’s update your portfolio or dashboard to include a flex-based navbar that collapses on mobile.
Add This HTML Before Your Main Content
<nav style="background-color: #3498db; padding: 15px 20px; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap;">
<div style="color: white; font-size: 20px; font-weight: bold;">MySite</div>
<ul style="list-style: none; display: flex; gap: 20px; margin: 0; padding: 0;">
<li><a href="#" style="color: white; text-decoration: none;">Home</a></li>
<li><a href="#" style="color: white; text-decoration: none;">About</a></li>
<li><a href="#" style="color: white; text-decoration: none;">Contact</a></li>
</ul>
</nav>Add this CSS inside <style>:
@media (max-width: 768px) {
nav ul {
flex-direction: column;
width: 100%;
margin-top: 10px;
}
nav {
flex-direction: column;
align-items: flex-start;
}
}Now your navbar stacks on small screens — perfect for mobile users!
🚀 Advanced Tip: Combine Grid & Flexbox in One Page
You can use Grid for main layout and Flexbox for internal alignment .
Example:
.main-grid {
display: grid;
grid-template-columns: 1fr 3fr;
gap: 30px;
}
.sidebar {
background-color: #fff;
padding: 20px;
}
.content {
background-color: #fff;
padding: 20px;
display: flex;
flex-direction: column;
gap: 15px;
}Use this structure in your dashboard or blog layout — powerful and clean!
🧪 Try It Yourself!
- Add a dark mode toggle to your gallery or card layout
- Style your gallery items as circular avatars using
border-radius: 50% - Make the card layout change direction on smaller screens using media queries
- Add a filter menu above your gallery that uses Flexbox for buttons
✅ Summary of What You Built Today
| PROJECT | DESCRIPTION |
|---|---|
| Responsive Image Gallery | Used CSS Grid withauto-fitandminmax() |
| Card Layout with Flexbox | Usedflex-wrap,justify-content, and hover effects |
| Responsive Navbar | Flexbox + media query for mobile stacking |
| Combined Layouts | Grid for structure, Flexbox for alignment inside cards or sidebar |
🚀 Next Lecture Preview:
In Lecture 48 , we’ll explore advanced form styling and validation — so you can build beautiful, functional forms that work well on all devices and help users fill them correctly!
Stay Updated
If you found this information useful, don’t forget to bookmark this page and Share.
HTML5 and CSS3 Compleate Series
