CSS minmax() — діапазон розміру колонки чи рядка ґріда

Опис

Функція minmax() в CSS надає можливість визначити динамічний діапазон значень для таких параметрів, як ширина, висота або інший розмір елемента. Це може бути неймовірно корисним у створенні адаптивних макетів, які відповідають різним розмірам екрану або контейнерів. Функція приймає два аргументи: minimum та maximum, і результатом буде значення, яке знаходиться між ними, з урахуванням більшого з двох параметрів.

Ось простий приклад її використання:

grid-template-columns: minmax(200px, 400px);

У цьому прикладі елемент сітки матиме ширину від 200px до 400px, залежно від доступного простору. Це дає гнучкість у відображенні елемента, адаптуючи його до різних розмірів екрану.

Значення, які можна використовувати для minimum та maximum, залежать від властивості CSS, до якої ви застосовуєте функцію minmax(). Наприклад, для властивостей, що визначають ширину (width), можна використовувати значення, які приймаються для ширини елемента.

правити

Загальний опис

правити

Порада

Експериментуйте з різними значеннями minimum та maximum, щоб знайти оптимальні параметри для вашого дизайну.

автор: Bond правити

Нотатка

Ця функція особливо корисна в контексті сіток (grid) та резинових макетів (flexbox), де елементи повинні адаптуватися до різних розмірів екрану або контейнерів. Використовуючи minmax(), можна забезпечити, що дизайн залишається зрозумілим та ефективним на всіх пристроях і розмірах екрану.

автор: Bond правити

Нотатка

Зверніть увагу на підтримку браузерами функції minmax(), особливо якщо ви плануєте використовувати її в проекті. Впевніться, що ваш цільовий браузер підтримує цю функцію або розгляньте альтернативні підходи для забезпечення сумісності.

автор: Bond правити

+ додати пораду чи нотатку

Синтаксис

minmax(minimum, maximum);

Функція minmax може отримувати 2 значень:

<minimum>

Значення, що визначає мінімальну ширину, довжину або розмір елемента. Може бути вказане у пікселях (px), відсотках (%), вьюпортах (vw), елементах шрифту (em, rem), тощо.

автор: Bond

правити

<maximum>

Значення, що визначає максимальну ширину, довжину або розмір елемента. Може бути вказане у пікселях (px), відсотках (%), вьюпортах (vw), елементах шрифту (em, rem), тощо.

автор: Bond

правити

Переглядачі

Стаціонарні переглядачі Мобільні переглядачі

Підтримка: стаціонарні переглядачі

Переглядач
	57	52	10.1	44	16

Підтримка: мобільні переглядачі

Переглядач
	57	57	52	10.3

Приклади

+ запропонувати свій приклад у пісочниці

<div id="description">
  <h2>Приклад 1</h2>
  <p>У прикладі, minmax(200px, 1fr) означає, що кожна колонка має мінімальну ширину 200px і максимальну ширину, яка займає доступний залишок простору (1fr - одна частина залишку).</p>
  <p>За допомогою repeat(auto-fit, minmax(200px, 1fr)) ми повторюємо це правило для всіх колонок у контейнері.</p>
</div>

<div class="result">
  <div class="box">Елемент 1</div>
  <div class="box">Елемент 2</div>
</div>

#description {
  font-style: italic;
  text-align: left;
  line-height: 1.5;
  margin-bottom: 50px;
  padding: 12px 16px;
  background-color: #f7f7f7;
  border: 1px solid #ccc;
}

.result {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  justify-content: center;
  gap: 20px;
}

.box {
  background-color: blue;
  color: white;
  padding: 20px;
  text-align: center;
}

<div id="description">
  <h2>1fr проти minmax(0, 1fr)</h2>
  <p>Довге нерозривне слово всередині колонки. Зверніть увагу на ширину кольорових комірок.</p>
</div>

<div id="result">
  <div>
    <p class="label">grid-template-columns: 1fr 1fr</p>
    <div class="grid broken">
      <div class="cell a">Sesquipedalianism_supercalifragilisticexpialidocious_2026</div>
      <div class="cell b">Друга колонка</div>
    </div>
  </div>

  <div>
    <p class="label">grid-template-columns: minmax(0, 1fr) minmax(0, 1fr)</p>
    <div class="grid fixed">
      <div class="cell a">Sesquipedalianism_supercalifragilisticexpialidocious_2026</div>
      <div class="cell b">Друга колонка</div>
    </div>
  </div>
</div>

#description {
  font-style: italic;
  line-height: 1.5;
  margin-bottom: 30px;
  padding: 12px 16px;
  background-color: #f7f7f7;
  border: 1px solid #ccc;
}

#result {
  display: grid;
  gap: 28px;
}

.label {
  margin: 0 0 6px;
  font: 13px/1.4 monospace;
  color: #555;
}

.grid {
  display: grid;
  gap: 8px;
  padding: 8px;
  border: 1px dashed #999;
}

.broken {
  grid-template-columns: 1fr 1fr;
}

.fixed {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}

.cell {
  padding: 10px;
  font: 14px/1.4 Arial, sans-serif;
}

.a { background: #dbeafe; }
.b { background: #fde68a; }