How to Create a Responsive Image Gallery using CSS?
Last Updated :
30 Jul, 2024
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:
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.
HTML
<!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.geeksforgeeks.org/wp-content/uploads/20240220115845/Russia-660.webp"
alt="Image 1">
</div>
<div class="gallery-item">
<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20240220113546/States-&-Territories-in-USA.webp"
alt="Image 2">
</div>
<div class="gallery-item">
<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20240308154125/India-GK.webp"
alt="Image 3">
</div>
<div class="gallery-item">
<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20240220115845/Russia-660.webp"
alt="Image 5">
</div>
<div class="gallery-item">
<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20240220113546/States-&-Territories-in-USA.webp"
alt="Image 7">
</div>
<div class="gallery-item">
<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20240308154125/India-GK.webp"
alt="Image 8">
</div>
<div class="gallery-item">
<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20240220115845/Russia-660.webp"
alt="Image 5">
</div>
<div class="gallery-item">
<img src=
"https://media.geeksforgeeks.org/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.
HTML
<!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.geeksforgeeks.org/wp-content/uploads/20240308154125/India-GK.webp"
alt="Image 3">
</div>
<div class="grid-item">
<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20240220115845/Russia-660.webp"
alt="Image 5">
</div>
<div class="grid-item">
<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20240220113546/States-&-Territories-in-USA.webp"
alt="Image 7">
</div>
<div class="grid-item">
<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20240308154125/India-GK.webp"
alt="Image 8">
</div>
<div class="grid-item">
<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20240220115845/Russia-660.webp"
alt="Image 5">
</div>
<div class="grid-item">
<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20240220113546/States-&-Territories-in-USA.webp"
alt="Image 7">
</div>
</div>
</body>
</html>
Output:
Similar Reads
How to Create a Responsive Image Grid using CSS? A responsive image grid is a layout technique used to display images in a grid-like structure that adjusts dynamically based on the screen size to ensure that the grid looks good and functions well across various devices and screen resolutions. Below are the approaches to creat a responsive image gr
3 min read
How to Create a Responsive Image Gallery with Flexbox? A responsive image gallery adjusts to different screen sizes to ensure that images look good on all devices. Flexbox, a CSS layout model, provides a powerful way to create a responsive image gallery by allowing flexible and efficient arrangements of items within a container. ApproachCreate a contain
3 min read
How to create responsive image gallery using HTML, CSS, jQuery and Bootstrap? With the advent of new frameworks in web technologies, it has become quite easy to design and implement feature-rich and responsive web pages. Here, we are going to design a responsive image gallery using HTML, CSS, jQuery, and Bootstrap. Features or Functionalities to implement:Responsive imagesRes
3 min read
How to Create a Responsive Image Gallery in Bootstrap ? An image gallery is like a digital album where we can put our multiple images to attract user attention. We have used Bootstrap a CSS framework for Creating a Responsive Image Gallery where the layout adjusts automatically based on the screen size, ensuring that it looks good on both large desktop s
3 min read
How to set a Responsive Full Background Image Using CSS ? The purpose of this article is to set a Responsive Full Background Image Using CSS.To set a Responsive Full Background Image using CSS we will use the CSS background-size property that has a value auto that tells the browsers to automatically scale the image's width and height based on the container
1 min read
How to Create Image Gallery using JavaScript? An Image Gallery is a collection of images displayed in a grid or slideshow format on a webpage. To create an Image Gallery using JavaScript, you can dynamically load images, create HTML elements, and use CSS for styling. JavaScript can add interactivity, like transitions and navigation controls.Pro
3 min read