CSS
Creating Intrinsically Responsive Grids with `auto-fit` and `minmax()`
Build dynamic, intrinsically responsive grid layouts that adapt column counts based on available space using `grid-template-columns: repeat(auto-fit, minmax(min, max))`.
.responsive-grid {
display: grid;
/*
repeat(auto-fit, minmax(200px, 1fr)):
- auto-fit: Automatically fits as many columns as possible. Tracks will expand to fill available space.
- minmax(200px, 1fr): Each column will be at least 200px wide,
but if there's extra space, it will grow to fill it (1fr).
If the container becomes too narrow, columns will wrap onto new lines.
Use `auto-fill` instead of `auto-fit` if you want to keep empty tracks
(columns) at their minimum size rather than having them expand.
*/
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 20px;
padding: 20px;
max-width: 1200px;
margin: 0 auto;
border: 1px solid #ddd;
}
.grid-item {
background-color: #f0f0f0;
border: 1px solid #ccc;
padding: 20px;
text-align: center;
min-height: 100px;
}
/* Example HTML structure */
/*
<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 snippet demonstrates a powerful CSS Grid technique for creating intrinsically responsive layouts. `grid-template-columns: repeat(auto-fit, minmax(min-width, 1fr))` automatically creates as many columns as can fit while ensuring each column is at least `min-width` wide and scales up to `1fr` (an equal fraction of the available space). `auto-fit` expands tracks to fill the available space, potentially leaving empty tracks if there aren't enough items. This technique significantly reduces the need for extensive media queries for simple column count changes, making layouts more adaptive.