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? Pending Review
Asked on Feb 22, 2026
Answer
Creating a responsive image gallery using CSS Grid is a powerful way to manage layout with flexibility and simplicity. Here's a basic example to get you started.
<!-- 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">
<!-- Add more images as needed -->
</div>
<!-- END COPY / PASTE -->Additional Comment:
- The CSS Grid property "grid-template-columns" uses "auto-fill" and "minmax" to create a responsive layout that adjusts to the container's width.
- The "gap" property adds spacing between the grid items, which are the images in this case.
- Images are set to "width: 100%" to ensure they fill their grid cell while maintaining aspect ratio with "height: auto".
- This setup automatically adjusts the number of columns based on the container's width, making it responsive.
Recommended Links:
