CSS
Responsive CSS Grid Layout with `auto-fit` and `minmax`
Create dynamic and responsive grid layouts where items automatically adjust their width and quantity based on the available space using `repeat(auto-fit, minmax(...))` for optimal display.
.grid-container {
display: grid;
/* Automatically creates columns that are at least 200px wide, */
/* and stretch to fill available space if wider than 1fr. */
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 20px; /* Space between grid items */
padding: 20px;
border: 1px solid #ccc;
}
.grid-item {
background-color: #e0f2f7;
border: 1px dashed #999;
padding: 30px;
text-align: center;
}
How it works: This snippet showcases a powerful CSS Grid technique for creating responsive layouts. `grid-template-columns: repeat(auto-fit, minmax(200px, 1fr))` instructs the browser to create as many columns as can fit, ensuring each column is at least `200px` wide but can grow up to `1fr` (one fraction of the available space). `gap` adds consistent spacing between grid items, making this ideal for product listings or image galleries.