CSS
Responsive Auto-Fitting Grid with minmax()
Create flexible, responsive grid layouts that automatically adjust column count and width based on available space using CSS Grid's `repeat()` and `minmax()` functions.
.responsive-grid {
display: grid;
/* Creates columns that are at least 200px wide, but grow to 1fr if space allows. */
/* auto-fit ensures columns fill the available space, even if there are fewer items. */
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 1rem; /* Space between grid items */
padding: 1rem;
border: 1px solid #ccc;
}
.grid-item {
background-color: #f0f0f0;
padding: 20px;
text-align: center;
border: 1px solid #aaa;
}
How it works: This code snippet creates a highly responsive grid layout. The `grid-template-columns: repeat(auto-fit, minmax(200px, 1fr))` declaration is key. `auto-fit` automatically adjusts the number of columns based on the container's width, `minmax(200px, 1fr)` ensures each column is at least 200px wide but can expand to fill available space equally (`1fr`). `gap` adds consistent spacing between grid items.