CSS
Responsive Grid with minmax() and auto-fit
Create a highly responsive CSS Grid layout that automatically adjusts the number of columns and item sizes based on available space using `minmax()` and `auto-fit`.
.responsive-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 20px;
padding: 20px;
max-width: 1200px;
margin: 0 auto;
}
.grid-item {
background-color: #f0f0f0;
border: 1px solid #ccc;
padding: 20px;
text-align: center;
min-height: 150px;
display: flex;
align-items: center;
justify-content: center;
}
/* HTML Structure Example:
<div class="responsive-grid">
<div class="grid-item">Item 1</div>
<div class="grid-item">Item 2</div>
<div class="grid-item">Item 3</div>
<div class="grid-item">Item 4</div>
<div class="grid-item">Item 5</div>
<div class="grid-item">Item 6</div>
</div>
*/
How it works: This CSS snippet demonstrates how to create a highly flexible and responsive grid layout without relying on media queries. The `grid-template-columns: repeat(auto-fit, minmax(250px, 1fr))` property is key: `auto-fit` tells the grid to fit as many columns as possible, `minmax(250px, 1fr)` ensures each column is at least 250px wide but can grow up to `1fr` (an equal fraction of the available space). The `gap` property provides consistent spacing between grid items.