CSS
Responsive Auto-Fitting Grid Layout with `minmax()`
Master creating dynamic, responsive grid layouts that automatically adjust the number of columns and their width based on viewport size using `auto-fit` and `minmax()` functions.
.grid-container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 20px;
padding: 20px;
border: 1px solid #ccc;
}
.grid-item {
background-color: #f0f0f0;
padding: 15px;
text-align: center;
border: 1px solid #eee;
}
How it works: This CSS snippet creates a highly flexible and responsive grid layout. `display: grid` initializes the grid container. `grid-template-columns: repeat(auto-fit, minmax(250px, 1fr))` is the core of its responsiveness: `auto-fit` automatically determines the number of columns, while `minmax(250px, 1fr)` ensures each column is at least `250px` wide and takes an equal share (`1fr`) of any remaining space, dynamically adapting to different screen sizes. `gap` defines the spacing between grid items.