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;
}

<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>

🧩 How it Works

• auto-fit automatically 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.