CSS
Responsive Grid for Image Galleries or Cards
Create a fluid, responsive image gallery or card layout using CSS Grid's `repeat(auto-fit, minmax(...))` for dynamic column adjustments across devices.
.gallery-container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 20px; /* Space between grid items */
padding: 20px;
background-color: #f9f9f9;
border-radius: 10px;
}
.gallery-item {
background-color: #ffffff;
padding: 15px;
border-radius: 8px;
text-align: center;
box-shadow: 0 4px 8px rgba(0,0,0,0.1);
transition: transform 0.2s ease;
}
.gallery-item:hover {
transform: translateY(-3px);
}
.gallery-item img {
max-width: 100%;
height: auto;
display: block;
margin-bottom: 10px;
border-radius: 4px;
}
How it works: This CSS snippet creates a highly responsive grid layout suitable for image galleries or card sections. By using `display: grid;` and `grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));`, the grid automatically adjusts the number of columns based on the available space. Each item will be at least `250px` wide but can stretch to `1fr` (a fraction of available space) if more space is present. `gap` provides consistent spacing, ensuring a clean and adaptable design across different screen sizes.