CSS, HTML
Responsive Auto-Fit Grid with `minmax()`
Create a fully responsive grid layout where items automatically adjust their number of columns based on available space, ensuring optimal display on any screen size using CSS Grid's `auto-fit` and `minmax` functions.
<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 class="grid-item">Item 7</div>
</div>
.responsive-grid {
display: grid;
/* auto-fit or auto-fill determines how columns are created */
/* minmax(min-width, max-width) sets item width constraints */
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 1rem; /* Spacing between grid items */
padding: 1rem;
background-color: #e0f7fa;
}
.grid-item {
background-color: #80deea;
border: 1px solid #00acc1;
padding: 1.5rem;
text-align: center;
border-radius: 8px;
}
/* Example using auto-fill to potentially leave empty spaces if fewer items */
/* .responsive-grid {
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
} */
How it works: This snippet demonstrates a powerful CSS Grid technique for creating responsive item grids using `repeat(auto-fit, minmax(min-width, 1fr))`. `auto-fit` automatically creates as many columns as can fit, distributing available space. `minmax(200px, 1fr)` ensures each column is at least 200px wide but can grow up to `1fr` (one fraction of the remaining space), making the grid fluid and adaptable to various screen sizes without media queries.