Softness is Strength

Auto-fit Grid

Grid that flows like water

/* ❌ Rigid grid with breakpoints */
.grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
}
@media (min-width: 768px) {
  .grid {
    grid-template-columns: 1fr 1fr 1fr;
  }
}

/* ✅ Soft grid, flows naturally */
.grid {
  display: grid;
  grid-template-columns: 
    repeat(auto-fit, minmax(150px, 1fr));
  gap: 1rem;
}
Grid reflows automatically as container changes...
1
2
3
4

"Water benefits all things without trying to." — TTC 8

Turn list into grid-template-columns:repeat(auto-fit,minmax(14rem,1fr));