Чем `auto-fill` отличается от `auto-fit` в CSS Grid?

Question

Accepted Answer

## Пустые треки

Оба в `repeat(auto-fill|auto-fit, minmax(...))` создают столько колонок, сколько влезает.

- **`auto-fill`** — оставляет **пустые** треки, даже если элементов мало (колонки «пустышки» сохраняют структуру).
- **`auto-fit`** — **схлопывает** пустые треки в 0 и позволяет оставшимся `fr` растянуться на всю ширину.

```css
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
}
```

При полной заливке ряда визуально часто одинаково. Разница видна, когда элементов меньше, чем возможных колонок: `auto-fit` растягивает карточки, `auto-fill` оставляет «дырки» справа.