CSS
Responsive Grid Layout with `auto-fit` and `minmax`
Create a dynamic, responsive grid that automatically adjusts column count based on available space, ensuring optimal display across all screen sizes.
.grid-container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 20px; /* Space between grid items */
padding: 20px;
background-color: #f9f9f9;
}
.grid-item {
background-color: #e0e0e0;
border: 1px solid #ccc;
padding: 15px;
text-align: center;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
How it works: This CSS Grid snippet creates a highly responsive layout. `display: grid` initializes the grid. `grid-template-columns: repeat(auto-fit, minmax(280px, 1fr))` is the core: `auto-fit` tells the grid to fill the available space, creating as many columns as possible. `minmax(280px, 1fr)` ensures each column is at least 280px wide but can grow up to `1fr` (one fraction of the remaining space), making items grow and shrink fluidly. `gap` adds consistent spacing between grid items.