CSS
CSS Grid: Dynamic Responsive Card Grid with `minmax`
Implement a highly dynamic and responsive card grid layout using CSS Grid's `repeat()` and `minmax()` functions, ensuring cards adapt to available space and wrap automatically.
.card-grid {
display: grid;
/* Creates a flexible number of columns */
/* Each column is at least 250px wide, but can stretch up to 1fr */
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 20px; /* Space between grid items */
padding: 20px;
}
.card {
background-color: #ffffff;
border: 1px solid #ddd;
border-radius: 8px;
padding: 20px;
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
text-align: center;
}
.card h3 {
margin-top: 0;
color: #333;
}
.card p {
color: #666;
}
How it works: This powerful CSS Grid snippet creates a dynamic and responsive grid of cards. The magic happens with `grid-template-columns: repeat(auto-fit, minmax(250px, 1fr))`. `auto-fit` automatically creates as many columns as can fit into the container. `minmax(250px, 1fr)` ensures that each column is at least `250px` wide, but if there's extra space, it will grow proportionally to `1fr`. This means the grid will automatically adjust the number of columns and their widths based on the viewport size, without needing explicit media queries for column counts, making it incredibly flexible for card layouts.