CSS
Creating Responsive Grids with `grid-template-columns` and `minmax`
Build dynamic, responsive grid layouts that adapt to different screen sizes using CSS Grid's `repeat(auto-fit, minmax(...))` function. Optimize content display across devices.
.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: 20px;
text-align: center;
border: 1px solid #ddd;
}
How it works: This CSS snippet illustrates how to create a highly responsive grid layout using `grid-template-columns` with `repeat(auto-fit, minmax(value, 1fr))`. `auto-fit` automatically adjusts the number of columns to fit the available space. `minmax(250px, 1fr)` ensures each column is at least 250px wide but can grow up to `1fr` (fraction of available space), creating a flexible and adaptive grid where items resize and reflow as the viewport changes.