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

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

У CSS Grid значення auto-fit використовується у функції repeat() для автоматичного підлаштування кількості колонок під ширину контейнера.

На відміну від auto-fill, auto-fit не просто створює доступні колонки, а розтягує або стискає існуючі колонки, щоб вони максимально заповнили простір контейнера.

<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-fit, minmax(150px, 1fr));

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

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

При ширині контейнера 600px браузер автоматично визначає кількість колонок та розподіляє між ними доступний простір.

#parent {
  display: grid;

  grid-template-columns:
    repeat(auto-fit, minmax(150px, 1fr));

  width: 400px;
}

Колонки залишаються адаптивними: вони не стають меншими за 150px, але можуть займати більше місця завдяки 1fr.

Різниця між auto-fill та auto-fit

• auto-fill створює стільки колонок, скільки може поміститися.
• auto-fit підлаштовує колонки під доступний простір.
• auto-fit розтягує колонки, щоб заповнити весь контейнер.
• Обидва значення часто використовуються разом з minmax().

#parent {
  display: grid;

  grid-template-columns:
    repeat(auto-fit, minmax(150px, 1fr));
}

#parent {
  display: grid;

  grid-template-columns:
    repeat(auto-fit, minmax(150px, 1fr));

  width: 600px;
}

/* Для двох рядів можна зменшити ширину контейнера */
#parent {
  width: 400px;
}