CSS
Responsive CSS Grid for Dynamic Card Layouts
Create a flexible and responsive grid layout for cards or galleries using CSS Grid's `repeat(auto-fit, minmax())` function, adapting to screen size.
.card-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 20px; /* Space between grid items */
padding: 20px;
}
.card {
background-color: #f0f0f0;
border-radius: 8px;
padding: 15px;
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
text-align: center;
}
How it works: This CSS Grid snippet generates a responsive layout ideal for displaying a collection of cards or images. `grid-template-columns: repeat(auto-fit, minmax(250px, 1fr))` automatically creates as many columns as can fit, each at least 250px wide, and allowing them to grow equally to fill available space. `gap` adds consistent spacing between the grid items.