CSS
Create Responsive Card Grids with `auto-fit` and `minmax()`
Build highly responsive grid layouts that automatically adjust column count based on screen size, ensuring optimal display for card-based designs using `auto-fit` and `minmax()` functions.
.grid-container {
display: grid;
/* Automatically fits as many columns as possible */
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 20px; /* Space between grid items */
padding: 20px;
background-color: #f0f0f0;
}
.grid-item {
background-color: #fff;
border: 1px solid #ddd;
padding: 15px;
text-align: center;
font-family: sans-serif;
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}
/* HTML Structure:
<div class="grid-container">
<div class="grid-item">Card 1</div>
<div class="grid-item">Card 2</div>
<div class="grid-item">Card 3</div>
<div class="grid-item">Card 4</div>
<div class="grid-item">Card 5</div>
<div class="grid-item">Card 6</div>
</div>
*/
How it works: This snippet creates a dynamic and responsive grid layout perfect for displaying cards or similar content. `display: grid` initializes the grid. The magic happens with `grid-template-columns: repeat(auto-fit, minmax(250px, 1fr))`. `auto-fit` tells the grid to create as many columns as can fit into the container. `minmax(250px, 1fr)` ensures each column is at least `250px` wide but will grow (`1fr`) to fill any remaining space, creating fluid, equally sized columns that wrap responsively.