CSS
Build Responsive Grids with `auto-fit` and `minmax`
Create dynamic, responsive grid layouts that automatically adjust column count and width based on screen size using CSS Grid's `repeat`, `auto-fit`, and `minmax` functions.
.responsive-grid-container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 20px; /* Space between grid items */
padding: 20px;
background-color: #f9f9f9;
border: 1px solid #ddd;
}
.grid-item {
background-color: #e0f7fa;
border: 1px solid #00bcd4;
padding: 30px;
text-align: center;
font-size: 1.2em;
box-shadow: 2px 2px 5px rgba(0,0,0,0.1);
}
How it works: This snippet showcases how to create a highly flexible and responsive grid layout using CSS Grid. By setting `grid-template-columns` to `repeat(auto-fit, minmax(280px, 1fr))`, the grid container will automatically create as many columns as can fit, each at least `280px` wide, but no wider than `1fr` (an equal fraction of the available space). The `gap` property ensures consistent spacing between grid items. This technique eliminates the need for complex media queries for basic responsive column adjustments.