What CSS Grid property allows items to automatically move to the next line on smaller screens?
•7 min read

The CSS Grid property that allows items to automatically move to the next line on smaller screens is:
✅ grid-template-columns with repeat(auto-fit, minmax()) or auto-fill
Using auto-fit / auto-fill + minmax(), the grid becomes responsive and items wrap to the next line automatically.
✅ Example Code: Auto-Wrapping Grid (Responsive)
.container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 16px;
padding: 20px;
}
.item {
background: #4e8cff;
color: white;
padding: 20px;
font-size: 20px;
text-align: center;
border-radius: 8px;
}
JavaScript<div class="container">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
</div>
JavaScript🧩 How it Works
auto-fitautomatically fits as many columns as possible.minmax(200px, 1fr)ensures each grid item:- is at least 200px wide
- expands to fill available space
- On smaller screens, columns shrink—if space is not enough, items wrap to the next line automatically.


