CSS
Responsive Grid Layout for Content Cards using auto-fit and minmax()
Implement a flexible and responsive card layout that automatically adjusts column count based on available space, utilizing CSS Grid's `auto-fit` and `minmax()` functions for optimal display across devices.
.card-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 20px;
padding: 20px;
}
.card {
background-color: #f0f0f0;
border: 1px solid #ddd;
border-radius: 8px;
padding: 15px;
text-align: center;
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}
How it works: This CSS creates a highly responsive grid for displaying content cards. `display: grid;` activates grid layout. `grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));` is the core, telling the grid to automatically fit as many columns as possible, each having a minimum width of `280px` and growing to `1fr` (fraction of available space) if there's extra room. `gap` adds space between grid items, ensuring a clean layout. This requires a parent container with the `card-grid` class and child elements with the `card` class.