Ask any question about CSS here... and get an instant response.
Post this Question & Answer:
How can I create a responsive image gallery using CSS Grid?
Asked on Feb 09, 2026
Answer
Creating a responsive image gallery with CSS Grid is efficient and straightforward. CSS Grid allows you to define a flexible layout that adapts to different screen sizes.
<!-- BEGIN COPY / PASTE -->
<style>
.gallery {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
gap: 10px;
}
.gallery img {
width: 100%;
height: auto;
display: block;
}
</style>
<div class="gallery">
<img src="image1.jpg" alt="Image 1">
<img src="image2.jpg" alt="Image 2">
<img src="image3.jpg" alt="Image 3">
<img src="image4.jpg" alt="Image 4">
<!-- Add more images as needed -->
</div>
<!-- END COPY / PASTE -->Additional Comment:
- The "grid-template-columns" property uses "repeat" and "auto-fill" to create as many columns as will fit, with each column being at least 150px wide.
- The "gap" property adds space between the grid items, enhancing the visual separation of images.
- Images are set to "width: 100%" to ensure they fill their grid cell, maintaining aspect ratio with "height: auto".
- This setup is responsive, automatically adjusting the number of columns based on the container's width.
Recommended Links:
