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

Вивчаємо використання значення auto для автоматичного заповнення вільного простору в CSS Grid.

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

У CSS Grid для визначення ширини колонок та висоти рядків можна використовувати значення auto.

Значення auto дозволяє колонці або рядку зайняти весь доступний вільний простір після врахування колонок із фіксованими розмірами.

<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:
    100px auto 150px;

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

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

У цьому прикладі перша та третя колонки займають задану ширину, а друга отримує весь простір, що залишився.

❗ Важливо:

auto схоже на 1fr у простих випадках, але auto залежить від розміру контенту та доступного простору.

Приклади використання auto

#parent {
  display: grid;

  grid-template-columns:
    200px auto;
}

#parent {
  display: grid;

  grid-template-columns:
    100px 150px auto;
}

auto займає весь доступний вільний простір.
Фіксовані px-колонки враховуються першими.
auto можна використовувати для колонок і рядків.
auto зручно використовувати для адаптивних макетів.

📌 Завдання:

№1. Створіть Grid із двома колонками.
№2. Задайте першій колонці ширину 200px.
№3. Другу колонку зробіть auto.
№4. Створіть Grid із трьома колонками.
№5. Першу колонку зробіть 100px.
№6. Другу колонку зробіть 150px.
№7. Третю колонку зробіть auto.

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

Використовуйте auto для колонки, яка повинна забрати весь залишковий простір контейнера.

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

/* №1 */
grid-template-columns:
  200px auto;

/* №2 */
grid-template-columns:
  100px 150px auto;