CSS
Responsive Grid Layout with Dynamic Columns
Create adaptable grid layouts that automatically adjust the number of columns based on available space using CSS Grid's `repeat(auto-fill, minmax())` function.
.grid-container {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 20px;
padding: 20px;
background-color: #f8f8f8;
}
.grid-item {
background-color: #ffffff;
border: 1px solid #e0e0e0;
padding: 15px;
text-align: center;
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}
How it works: This CSS creates a responsive grid container where items are automatically arranged into columns. The `grid-template-columns` property with `repeat(auto-fill, minmax(280px, 1fr))` ensures that as many columns as possible fit into the available space, each being at least `280px` wide but growing to fill remaining space (`1fr`). The `gap` property provides consistent spacing between grid items, making it ideal for dynamic card or gallery layouts.