For video version of this article, watch this youtube video
In this tutorial, we will create a beautiful and responsive image grid gallery using HTML and CSS. This tutorial is perfect for beginners who want to understand the basics of CSS Grid and how to arrange images in a visually appealing layout. By the end of this tutorial, you’ll have a fully functional image gallery that you can use on your website or portfolio.
Step 1: Setting Up the HTML
First, we need to set up the basic HTML structure for our gallery. We’ll create a div with the class grid-container to hold our grid items, each containing an image.
<!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>
<div class="grid-container">
<div class="grid-item-1">
<img src="images/adult.avif" alt="">
</div>
<div class="grid-item-2">
<img src="images/boy.avif" alt="">
</div>
<div class="grid-item-3">
<img src="images/car.avif" alt="">
</div>
<div class="grid-item-4">
<img src="images/court.avif" alt="">
</div>
<div class="grid-item-5">
<img src="images/net.avif" alt="">
</div>
<div class="grid-item-6">
<img src="images/road.avif" alt="">
</div>
<div class="grid-item-7">
<img src="images/single cork.avif" alt="">
</div>
<div class="grid-item-8">
<img src="images/two boys.avif" alt="">
</div>
<div class="grid-item-9">
<img src="images/two cord.avif" alt="">
</div>
<div class="grid-item-10">
<img src="images/yellow cork.avif" alt="">
</div>
</div>
</body>
</html>
Step 2: Adding Basic Styles with CSS
Next, we need to add some basic CSS styles. We’ll start by resetting the margin, padding, and box-sizing for all elements to ensure consistent styling across different browsers.
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
background-color: white;
padding: 0.5rem 4rem;
}
img{
display: block;
width: 100%;
height: 100%;
}
Step 3: Creating the Grid Layout
Now, let’s create the grid layout for our gallery. We’ll use the CSS Grid layout module to define the structure of our grid container. The grid-template-columns and grid-template-rows properties will specify the number of columns and rows, while the grid-column-gap and grid-row-gap properties will add space between the grid items.
.grid-container{
display: grid;
grid-template-columns: repeat(5, 1fr);
grid-template-rows: repeat(4, 1fr);
grid-column-gap: 20px;
grid-row-gap: 20px;
height: 95vh;
width: 80%;
margin: auto;
}
Step 4: Placing Grid Items
To place the grid items in specific positions within the grid, we use the grid-area property. This property allows us to define the starting and ending row and column for each grid item. Here's how we can position each image:
.grid-item-1 {
grid-area: 3 / 4 / 5 / 5;
}
.grid-item-2 {
grid-area: 4 / 3 / 5 / 4;
}
.grid-item-3 {
grid-area: 1 / 4 / 3 / 6;
}
.grid-item-4 {
grid-area: 1 / 2 / 2 / 3;
}
.grid-item-5 {
grid-area: 3 / 5 / 5 / 6;
}
.grid-item-6 {
grid-area: 2 / 1 / 5 / 3;
}
.grid-item-7 {
grid-area: 1 / 1 / 2 / 2;
}
.grid-item-8 {
grid-area: 3 / 3 / 4 / 4;
}
.grid-item-9 {
grid-area: 2 / 3 / 3 / 4;
}
.grid-item-10 {
grid-area: 1 / 3 / 2 / 4;
}
Final Result
After adding all the HTML and CSS code, your image grid gallery should look something like this:
You can now customize the gallery by adding your own images, adjusting the grid layout, or changing the spacing between the grid items. This tutorial provides a solid foundation for creating complex and visually appealing grid layouts using CSS Grid.
Feel free to experiment with different configurations and explore the possibilities of CSS Grid. Happy coding!
Top comments (0)