CSS
Create a Responsive Image Gallery with CSS Grid
Build a dynamic and responsive grid layout for image galleries or product cards that automatically adjusts the number of columns based on screen size.
.gallery {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 20px; /* Provides spacing between grid items */
padding: 20px;
}
.gallery-item {
background-color: #f0f0f0;
border: 1px solid #ddd;
padding: 15px;
text-align: center;
}
/* HTML structure for the snippet */
/*
<div class="gallery">
<div class="gallery-item">Card 1</div>
<div class="gallery-item">Card 2</div>
<div class="gallery-item">Card 3</div>
<div class="gallery-item">Card 4</div>
<div class="gallery-item">Card 5</div>
<div class="gallery-item">Card 6</div>
</div>
*/
How it works: This CSS Grid snippet creates a highly responsive layout suitable for galleries or card displays. `grid-template-columns: repeat(auto-fit, minmax(250px, 1fr))` automatically creates as many columns as can fit, ensuring each column is at least `250px` wide and expands to fill available space evenly. The `gap` property adds consistent spacing between grid items.