How to Create a Responsive Image Gallery using CSS?
Creating a responsive image gallery using CSS is a common task in web development. A responsive gallery adjusts to different screen sizes and ensures that images look good on devices ranging from mobile phones to desktop monitors. In this article, we will explore different approaches to creating a responsive image gallery using CSS.
These are the following approaches:
Table of Content
- Using flexbox
- Using Grid layout
Using flexbox
In this approach, we are using the CSS flexbox property. We use CSS properties like flex-wrap to allow items to wrap onto multiple lines and flex to control how items grow to fill available space. The CSS calc() function is used to ensure the items fit within the container and we use Media queries to adjust the layout for different screen sizes to make the gallery responsive.
Example: This example uses flexbox property to create a responsive image gallery using CSS.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content=
"width=device-width, initial-scale=1.0">
<title>Flexbox Gallery</title>
<style>
.gallery {
display:flex;
flex-wrap:wrap;
gap:10px;
}
.gallery-item {
flex: 1 1 calc(25% - 20px);
box-sizing: border-box;
padding:10px;
text-align:center;
}
.gallery-item img {
width:100%;
height:auto;
display:block;
}
@media (max-width: 768px) {
.gallery-item {
flex: 1 1 calc(50% - 20px);
}
}
@media (max-width: 480px) {
.gallery-item {
flex: 1 1 100%;
}
}
/* Clearfix */
.gallery::after {
content: "";
display: table;
clear: both;
}
</style>
</head>
<body>
<div class="gallery">
<div class="gallery-item">
<img src=
"https://media.w3wiki.net/wp-content/uploads/20240220115845/Russia-660.webp"
alt="Image 1">
</div>
<div class="gallery-item">
<img src=
"https://media.w3wiki.net/wp-content/uploads/20240220113546/States-&-Territories-in-USA.webp"
alt="Image 2">
</div>
<div class="gallery-item">
<img src=
"https://media.w3wiki.net/wp-content/uploads/20240308154125/India-GK.webp"
alt="Image 3">
</div>
<div class="gallery-item">
<img src=
"https://media.w3wiki.net/wp-content/uploads/20240220115845/Russia-660.webp"
alt="Image 5">
</div>
<div class="gallery-item">
<img src=
"https://media.w3wiki.net/wp-content/uploads/20240220113546/States-&-Territories-in-USA.webp"
alt="Image 7">
</div>
<div class="gallery-item">
<img src=
"https://media.w3wiki.net/wp-content/uploads/20240308154125/India-GK.webp"
alt="Image 8">
</div>
<div class="gallery-item">
<img src=
"https://media.w3wiki.net/wp-content/uploads/20240220115845/Russia-660.webp"
alt="Image 5">
</div>
<div class="gallery-item">
<img src=
"https://media.w3wiki.net/wp-content/uploads/20240220113546/States-&-Territories-in-USA.webp"
alt="Image 7">
</div>
</div>
</body>
</html>
Output:
Using Grid layout
In this approach we are using CSS Grid layout for creating a responsive image gallery. We create a container for holding the grid items which is designated as a grid container using CSS display: grid. The grid structure is established using grid-template-columns and grid-template-rows, which define the number and size of columns and rows in the grid. Then we use auto-fit with minmax so the grid will adapt dynamically to different screen sizes for responsiveness.
Example: This example uses grid layout to create a responsive image gallery using CSS.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content=
"width=device-width, initial-scale=1.0">
<style>
.grid-gallery {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 10px;
}
.grid-item {
background: #f3f3f3;
padding: 10px;
text-align: center;
}
.grid-item img {
width: 100%;
height: auto;
display: block;
}
</style>
</head>
<body>
<div class="grid-gallery">
<div class="grid-item">
<img src=
"https://media.w3wiki.net/wp-content/uploads/20240308154125/India-GK.webp"
alt="Image 3">
</div>
<div class="grid-item">
<img src=
"https://media.w3wiki.net/wp-content/uploads/20240220115845/Russia-660.webp"
alt="Image 5">
</div>
<div class="grid-item">
<img src=
"https://media.w3wiki.net/wp-content/uploads/20240220113546/States-&-Territories-in-USA.webp"
alt="Image 7">
</div>
<div class="grid-item">
<img src=
"https://media.w3wiki.net/wp-content/uploads/20240308154125/India-GK.webp"
alt="Image 8">
</div>
<div class="grid-item">
<img src=
"https://media.w3wiki.net/wp-content/uploads/20240220115845/Russia-660.webp"
alt="Image 5">
</div>
<div class="grid-item">
<img src=
"https://media.w3wiki.net/wp-content/uploads/20240220113546/States-&-Territories-in-USA.webp"
alt="Image 7">
</div>
</div>
</body>
</html>
Output:
Contact Us