Функція minmax у CSS Grid

Функція minmax() у CSS Grid

У CSS Grid функція minmax() дозволяє задати діапазон розміру колонки: мінімальне та максимальне значення.

Вона часто використовується разом з 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, minmax(150px, 1fr));

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

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

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

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

Структура функції minmax()

• Перше значення — мінімальний розмір колонки.
• Друге значення — максимальний розмір колонки.
• auto-fill створює потрібну кількість колонок.
• 1fr дозволяє колонкам рівномірно розподіляти вільний простір.

#parent {
  display: grid;

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

#parent {
  display: grid;

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