CSS
Create Responsive Grids with Auto-Fit and Minmax
Implement a highly responsive CSS Grid layout that automatically adjusts the number of columns based on available space using `repeat(auto-fit, minmax())` for fluid designs.
.grid-container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 20px;
padding: 20px;
background-color: #f9f9f9;
}
.grid-item {
background-color: #e0e0e0;
padding: 20px;
text-align: center;
border: 1px solid #bbb;
}
How it works: `display: grid` creates a grid context. `grid-template-columns: repeat(auto-fit, minmax(250px, 1fr))` instructs the grid to create as many columns as can fit, each at least 250px wide and growing to `1fr` to fill space. `gap` defines the spacing between grid items.