Значення auto-fill у CSS Grid

Вивчаємо використання auto-fill у функції repeat() для автоматичного створення однакових колонок у CSS Grid.

Значення auto-fill у CSS Grid

У CSS Grid функція repeat() може використовувати спеціальне значення auto-fill, яке автоматично визначає кількість колонок, що помістяться у контейнер.

За допомогою auto-fill можна створювати адаптивні сітки, де кількість колонок змінюється залежно від ширини батьківського елемента.

<div id="parent">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
  <div>7</div>
  <div>8</div>
</div>

#parent {
  display: grid;

  grid-template-columns:
    repeat(auto-fill, 200px);

  border: 2px solid #696989;
  padding: 10px;
}

#parent > div {
  padding: 10px;
  border: 1px solid #696989;
}

Браузер автоматично розраховує, скільки колонок шириною 200px може поміститися в контейнері.

❗ Важливо:

auto-fill створює стільки колонок, скільки фізично може поміститися у Grid-контейнері.

Синтаксис auto-fill

grid-template-columns:
  repeat(auto-fill, 200px);

auto-fill використовується тільки всередині repeat().
Друге значення repeat() задає розмір колонок.
Браузер сам визначає кількість колонок.
Ширина контейнера впливає на кількість створених колонок.

📌 Завдання:

№1. Створіть Grid-контейнер.
№2. Додайте декілька дочірніх елементів.
№3. Встановіть ширину колонок 200px через repeat().
№4. Використайте auto-fill.
№5. Змінюйте ширину батьківського блоку та спостерігайте за кількістю колонок.

💡 Показати підказку

Використовуйте repeat(auto-fill, 200px), щоб браузер сам визначав кількість колонок.

✅ Показати відповідь

#parent {
  display: grid;

  grid-template-columns:
    repeat(auto-fill, 200px);
}