Рекомендации по курсу:

Функция CSS minmax()

Определение и использование minmax() Функция minmax() используется для CSS сеточной разметки и определяет диапазон размеров, который больше или равен минимальному значению и меньше или равен максимальному значению.

Пример

Использование minmax() Определите размерный диапазон для столбцов сетки:

.grid-container {
  display: grid;
  grid-template-columns: minmax(min-content, 350px) minmax(150px, 1fr) 120px;
  grid-gap: 5px;
  height: 150px;
  background-color: green;
  padding: 10px;
}

Попробуйте сами

Синтаксис CSS

minmax(min, max)
Значение Описание
min

Обязателен. Минимальное значение.

Это может быть длина, процент, эластичный значения (fr) или одним из следующих ключевых слов:

  • auto
  • max-content
  • min-content
max

Обязателен. Максимальное значение.

Это может быть длина, процент, эластичный значения (fr) или одним из следующих ключевых слов:

  • auto
  • max-content
  • min-content

Технические детали

Версия: Модуль CSS Grid Layout Level 2

Поддержка браузеров

Таблица показывает версии браузеров, которые полностью поддерживают эту функцию.

Chrome Edge Firefox Safari Opera
59 16 52 10.1 44

См. также страницы

См. также:Функция min() в CSS

См. также:Функция max() в CSS

См. также:Свойство CSS grid-template-columns

См. также:Свойство CSS grid-template-rows

См. также:Свойство grid-auto-columns в CSS

См. также:Свойство grid-auto-rows в CSS