A responsive image gallery is a user interface component that displays a collection of images in a grid or other layout and adjusts its size and layout based on the screen size and device orientation of the user. The goal of a responsive image gallery is to provide an optimal viewing experience for users on all devices, including desktops, laptops, tablets, and smartphones. In this article, we will give you two examples to create CSS responsive image gallery.
Responsive image galleries typically use CSS and JavaScript to dynamically adjust the size and layout of the images and the gallery container, based on the available screen space. This can involve scaling the images, adjusting their aspect ratio, and reordering them to fit the available space. The layout and design of a responsive image gallery can vary widely, depending on the needs and preferences of the designer and the intended use case.
To create a responsive image gallery in CSS, you can follow these steps:
Create a container element for your gallery. This can be a div or other block-level element.
Use CSS to set the display property of the container to flex or grid. This will allow you to arrange the gallery items in rows or columns and control the spacing between them.
Use CSS to set the max-width property of the container to 100% and the height to auto. This will ensure that the gallery scales proportionally and fits within the bounds of its parent element.
Use CSS to style the gallery items (i.e. the images). You can set the width property to a percentage or auto value to make the images responsive, and use other properties such as border-radius, box-shadow, and transition to add visual effects.
Optionally, you can use JavaScript to add interactivity to the gallery, such as a lightbox or slideshow.
Create CSS responsive image gallery
Here is an example CSS code for a basic responsive image gallery:
Code:
<!DOCTYPE html>
<html>
<head>
<title>Responsive Image Gallery</title>
<style>
/* CSS Styling */
.gallery {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 10px;
}
.gallery-item {
flex-basis: calc(33.33% - 10px);
max-width: calc(33.33% - 10px);
}
.gallery-item img {
width: 100%;
height: auto;
border-radius: 5px;
box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.3);
}
@media (max-width: 768px) {
.gallery-item {
flex-basis: calc(50% - 10px);
max-width: calc(50% - 10px);
}
}
@media (max-width: 480px) {
.gallery-item {
flex-basis: 100%;
max-width: 100%;
}
}
/* Lightbox styling */
.lightbox {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.8);
display: flex;
justify-content: center;
align-items: center;
}
.lightbox img {
max-width: 90%;
max-height: 90%;
border-radius: 5px;
box-shadow: 0px 0px 5px rgba(255, 255, 255, 0.3);
}
</style>
</head>
<body>
<h1>Responsive Image Gallery</h1>
<div class="gallery">
<div class="gallery-item">
<img src="https://static.wixstatic.com/media/0f65e1_f92ffe40341b437597e01c2856690389~mv2.jpg" alt="Image 1">
</div>
<div class="gallery-item">
<img src="https://static.wixstatic.com/media/0f65e1_a138403b18a443aeb5816aaea7cf8e2d~mv2.jpg" alt="Image 2">
</div>
<div class="gallery-item">
<img src="https://static.wixstatic.com/media/0f65e1_396cddc79ea44a3ca84393f7ca1c1e4d~mv2.jpg" alt="Image 3">
</div>
<div class="gallery-item">
<img src="https://static.wixstatic.com/media/0f65e1_3ac187ee290b490997ad64c9f5ba2e58~mv2.jpg" alt="Image 3">
</div>
<!-- Add more gallery items as needed -->
</div>
<script>
/* JavaScript for Responsive Lightbox */
const galleryItems = document.querySelectorAll('.gallery-item');
galleryItems.forEach(item => {
item.addEventListener('click', () => {
// Create lightbox element
const lightbox = document.createElement('div');
lightbox.classList.add('lightbox');
// Create image element and add to lightbox
const img = document.createElement('img');
img.src = item.querySelector('img').src;
lightbox.appendChild(img);
// Add lightbox to document
document.body.appendChild(lightbox);
// Close lightbox on click
lightbox.addEventListener('click', () => {
lightbox.remove();
});
});
});
</script>
</body>
</html>Output:
Here is an example CSS code for a responsive image gallery with some effects:
Code:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Responsive Image Gallery</title>
<style>
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
font-family: Arial, sans-serif;
background-color: #f2f2f2;
}
h1 {
text-align: center;
margin: 50px 0;
}
.gallery {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
grid-gap: 20px;
margin: 0 auto;
max-width: 1200px;
padding: 0 20px;
}
.gallery-item {
position: relative;
overflow: hidden;
border-radius: 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
}
.gallery-item img {
display: block;
width: 100%;
height: auto;
transition: transform 0.3s ease-in-out;
}
.gallery-item:hover img {
transform: scale(1.1);
}
@media screen and (max-width: 768px) {
.gallery {
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}
}
</style>
</head>
<body>
<h1>Responsive Image Gallery</h1>
<div class="gallery">
<div class="gallery-item">
<img src="https://static.wixstatic.com/media/0f65e1_f92ffe40341b437597e01c2856690389~mv2.jpg" alt="Image 1">
</div>
<div class="gallery-item">
<img src="https://static.wixstatic.com/media/0f65e1_a138403b18a443aeb5816aaea7cf8e2d~mv2.jpg" alt="Image 2">
</div>
<div class="gallery-item">
<img src="https://static.wixstatic.com/media/0f65e1_396cddc79ea44a3ca84393f7ca1c1e4d~mv2.jpg" alt="Image 3">
</div>
<div class="gallery-item">
<img src="https://static.wixstatic.com/media/0f65e1_3ac187ee290b490997ad64c9f5ba2e58~mv2.jpg" alt="Image 3">
</div>
<!-- Add more gallery items as needed -->
</div>
<script>
// Optional JavaScript code for adding functionality to the gallery
const galleryItems = document.querySelectorAll('.gallery-item');
galleryItems.forEach(item => {
item.addEventListener('click', () => {
item.classList.toggle('active');
});
});
</script>
</body>
</html>Explanation:
We start by setting the box-sizing property to border-box and resetting the margin and padding of all elements to 0 so that our layout is consistent across different browsers.
We set the background color of the body to #f2f2f2, and use the Arial font for the text.
We create an h1 heading with a centred text and a margin of 50px on the top and bottom.
We create a .gallery container with a grid display, using the repeat(auto-fit, minmax(300px, 1fr)) property to automatically adjust the number of columns based on the available space, with each column having a minimum width of 300px and taking up an equal fraction of the available space using the 1fr unit. We also add a grid-gap of 20px to create some space between the gallery items. We set the maximum width of the container to 1200px and add 20px of padding on the left and right so that the gallery is centred on the page and has some space on the sides.
We create a .gallery-item class to represent each image in the gallery. We set the position to relative and the overflow to hidden, so that the image is contained within the borders of the container. We also set the border-radius to 10px and add a box-shadow to create a subtle effect on the edges of the container.
We add an img element inside each .gallery-item container, with a width of 100% and an auto height, so that the image scales proportionally and fits inside the container. We also add a transition property with a duration of 0.3s and an ease-in-out timing function, so that the image smoothly transitions between states.
We add a hover effect to the .gallery-item img selector, so that when the user hovers over an image, it scales up by 1.1x using the transform property.
Finally, we use JavaScript to add optional functionality to the gallery. We select all the .gallery-item containers using the querySelectorAll method and add a click event listener to each one using the forEach method. When the user clicks on an image, we toggle the .active class on the container, which could be used to add additional styling or behavior to the selected image.
Output:
