CSS
Create a Responsive Grid Layout with minmax and repeat
Learn to build a dynamic, responsive grid layout that adapts item column count based on available space using CSS Grid's `repeat`, `auto-fit`, and `minmax` functions.
.grid-container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 20px;
padding: 20px;
background-color: #eee;
}
.grid-item {
background-color: #fff;
border: 1px solid #ccc;
padding: 20px;
text-align: center;
}
How it works: This code creates a responsive grid where columns automatically adjust. `display: grid` enables the grid. `grid-template-columns: repeat(auto-fit, minmax(250px, 1fr))` instructs the grid to create as many columns as can fit, each being at least `250px` wide but growing to equally share available space (`1fr`). `gap` adds spacing between grid items for visual separation.