В чём разница между auto-fit и auto-fill в repeat()?

Оба значения заставляют Grid самому вычислить, сколько колонок помещается в контейнер, но по-разному ведут себя с пустым местом.

Различия

• `auto-fill` создаёт столько колонок, сколько поместится, и оставляет пустые колонки, даже если элементов меньше.
• `auto-fit` делает то же самое, но схлопывает пустые колонки, поэтому существующие элементы растягиваются на всю ширину.

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
}

Такая сетка сама перестраивается: на широком экране много колонок, на узком одна, и без media query.

Когда что

• auto-fit — когда карточки должны занять всю ширину, если их мало.
• auto-fill — когда нужна одинаковая ширина ячеек независимо от количества элементов.

Коротко для собеседования

Разница видна только когда элементов мало: auto-fit растягивает их, auto-fill оставляет пустые колонки.