Let’s begin with Lecture 23 of the HTML5 & CSS3 series. Advanced CSS Grid – Powerful Layouts with Grid Areas, Repeat, and Responsive. This lecture is for absolute beginners; even kids can follow along and understand.
🎯 Objective:
By the end of this lecture, you will:
- Master advanced CSS Grid features like
grid-area,repeat(), andminmax() - Be able to create complex layouts using named grid areas
- Build a responsive photo gallery layout that adapts to screen size
- Use
auto-fitandauto-fillfor dynamic grids - Understand when to use Grid over Flexbox for advanced projects
🔧 Advanced CSS Grid Features
We’ll explore these powerful tools:
| Feature | Description |
|---|---|
grid-area | Assign names to items and define layout visually |
grid-template-areas | Create visual layout templates using strings |
repeat() | Easily define multiple columns or rows |
minmax() | Set flexible sizes for columns/rows |
auto-fit/auto-fill | Let the browser decide how many columns fit on screen |
📐 Using grid-area and grid-template-areas
You can name your grid items and then define where they go using a visual layout.
Example:
.container {
display: grid;
grid-template-columns: 2fr 1fr;
grid-template-rows: auto 300px auto;
grid-template-areas:
"header header"
"main sidebar"
"footer footer";
}
.header {
grid-area: header;
}
.main {
grid-area: main;
}
.sidebar {
grid-area: sidebar;
}
.footer {
grid-area: footer;
}This gives you a clear visual map of your layout!
🔄 repeat() – Define Multiple Columns or Rows Quickly
Use repeat() to avoid writing repetitive column/row definitions.
Example:
.grid {
display: grid;
grid-template-columns: repeat(3, 1fr); /* 3 equal-width columns */
}You can also mix values:
grid-template-columns: repeat(2, 150px) 1fr; /* Two fixed-width + one flexible */📏 minmax() – Flexible Column and Row Sizes
Use minmax(min, max) to define a range for column or row size.
Example:
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));This creates a responsive layout that adjusts based on available space.
🔁 auto-fit vs auto-fill
Both work with repeat() but behave differently:
auto-fit: Shrinks tracks to fit more items (collapses empty columns)auto-fill: Keeps all defined tracks visible even if empty
Example:
.grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}💻 Try This: Build a Responsive Photo Gallery with Grid
Let’s build a responsive image gallery that automatically adjusts the number of columns based on screen size.
Step 1: Create a New File
In your VS Code project folder (MyFirstWebsite), create a new file named:
grid-gallery.htmlStep 2: Add This Code
<!DOCTYPE html>
<html>
<head>
<title>Responsive Grid Gallery</title>
<style>
body {
margin: 0;
font-family: Arial, sans-serif;
padding: 40px;
background-color: #f9f9f9;
}
h1 {
text-align: center;
color: #333;
}
.gallery {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 15px;
}
.photo {
background-color: white;
border: 1px solid #ddd;
border-radius: 8px;
overflow: hidden;
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}
.photo img {
width: 100%;
height: auto;
display: block;
}
.photo-caption {
padding: 10px;
text-align: center;
font-weight: bold;
}
</style>
</head>
<body>
<h1>My Photo Gallery</h1>
<div class="gallery">
<div class="photo">
<img src="https://picsum.photos/id/1015/300/200" alt="Nature">
<div class="photo-caption">Nature Scene</div>
</div>
<div class="photo">
<img src="https://picsum.photos/id/1016/300/200" alt="Mountains">
<div class="photo-caption">Mountain View</div>
</div>
<div class="photo">
<img src="https://picsum.photos/id/1018/300/200" alt="Forest">
<div class="photo-caption">Forest Path</div>
</div>
<div class="photo">
<img src="https://picsum.photos/id/1025/300/200" alt="Beach">
<div class="photo-caption">Sunny Beach</div>
</div>
<div class="photo">
<img src="https://picsum.photos/id/1033/300/200" alt="City">
<div class="photo-caption">City Life</div>
</div>
<div class="photo">
<img src="https://picsum.photos/id/1035/300/200" alt="People">
<div class="photo-caption">Happy People</div>
</div>
</div>
<p style="text-align: center; margin-top: 30px;"><a href="index.html">Back to Home</a></p>
</body>
</html>💡 You can replace the image URLs with your own local images if preferred.
Step 3: Run with Live Server
Right-click the code → Show All Commands → Launch Live Server
🎉 You’ve built a fully responsive photo gallery using advanced CSS Grid techniques!
🧪 Try It Yourself!
- Replace
auto-fitwithauto-filland observe the difference. - Make each photo have a minimum height of
250pxusingminmax(200px, 1fr). - Add a title section at the top using
grid-areaandgrid-template-areas. - Add hover effects to the photos using
transform: scale(1.05)andtransition.
🚀 Next Lecture Preview:
In Lecture 24, we’ll learn about CSS Transitions and Transformations — so you can add smooth animations like hover effects, scaling, rotating, and sliding — making your website feel alive and interactive!
Stay Updated
If you found this information useful, don’t forget to bookmark this page and Share.
HTML5 and CSS3 Compleate Series
