CSS-функция `minmax()`

minmax() — это функция CSS, которая задаёт диапазон размеров от min до max включительно. Она используется в CSS-сетках.

Попробуйте

grid-template-columns: minmax(20px, auto) 1fr 1fr;

grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);

grid-template-columns: minmax(2ch, 10ch) 1fr 1fr;

<section class="default-example" id="default-example">
  <div class="example-container">
    <div class="transition-all" id="example-element">
      <div>One. This column has more text in it.</div>
      <div>Two</div>
      <div>Three</div>
      <div>Four</div>
      <div>Five</div>
    </div>
  </div>
</section>

#example-element {
  border: 1px solid #c5c5c5;
  display: grid;
  grid-gap: 10px;
  width: 250px;
}

#example-element > div {
  background-color: rgb(0 0 255 / 0.2);
  border: 3px solid blue;
  text-align: left;
}

Синтаксис

/* <inflexible-breadth>, <track-breadth> values */
minmax(200px, 1fr)
minmax(400px, 50%)
minmax(30%, 300px)
minmax(100px, max-content)
minmax(min-content, 400px)
minmax(max-content, auto)
minmax(auto, 300px)
minmax(min-content, auto)

/* <fixed-breadth>, <track-breadth> values */
minmax(200px, 1fr)
minmax(30%, 300px)
minmax(400px, 50%)
minmax(50%, min-content)
minmax(300px, max-content)
minmax(200px, auto)

/* <inflexible-breadth>, <fixed-breadth> values */
minmax(400px, 50%)
minmax(30%, 300px)
minmax(min-content, 200px)
minmax(max-content, 200px)
minmax(auto, 300px)

Функция принимает два параметра: min и max.

Каждый параметр может быть значением типа <length>, <percentage> или одним из ключевых слов: max-content, min-content или auto.

Второй параметр max также принимает значения <flex>. (Эти единицы fr можно использовать только для max; для min они недопустимы.)

Если max < min, то max игнорируется, а minmax(min,max) считается равным min.

Значения

<length>

Неотрицательная длина.

<percentage>

Неотрицательный процент относительно строчного размера контейнера сетки для столбцов сетки и блочного размера контейнера сетки для строк сетки. Если размер контейнера сетки зависит от размера его дорожек, то <percentage> следует считать значением auto. Пользовательский агент может скорректировать вклад дорожки во внутренний размер контейнера сетки и увеличить окончательный размер дорожки на минимальную величину, необходимую для учёта процента.

flex

Неотрицательная размерность с единицей fr, задающая коэффициент гибкости дорожки. Каждая дорожка размером <flex> получает долю оставшегося пространства пропорционально своему коэффициенту гибкости.

max-content

Обозначает наибольший вклад max-content элементов сетки, занимающих дорожку сетки.

min-content

Обозначает наибольший вклад min-content элементов сетки, занимающих дорожку сетки.

auto

В качестве min обозначает наименьший размер (заданный свойствами min-width/min-height) элементов сетки, занимающих дорожку сетки. В качестве max он идентичен max-content. Однако, в отличие от max-content, он позволяет расширять дорожку с помощью значений свойств align-content и justify-content, таких как normal и stretch.

Формальный синтаксис

<minmax()> = 
  minmax( [ <length-percentage> | min-content | max-content | auto ] , [ <length-percentage> | <flex> | min-content | max-content | auto ] )

<length-percentage> = 
  <length> |
  <percentage>

Свойства CSS

Функцию minmax() можно использовать в:

• grid-template-columns
• grid-template-rows
• grid-auto-columns
• grid-auto-rows

Примеры

CSS

#container {
  display: grid;
  grid-template-columns: minmax(min-content, 300px) minmax(200px, 1fr) 150px;
  grid-gap: 5px;
  box-sizing: border-box;
  height: 200px;
  width: 100%;
  background-color: #8cffa0;
  padding: 10px;
}

#container > div {
  background-color: #8ca0ff;
  padding: 5px;
}

HTML

<div id="container">
  <div>Item as wide as the content, but at most 300 pixels.</div>
  <div>Item with flexible width but a minimum of 200 pixels.</div>
  <div>Inflexible item of 150 pixels width.</div>
</div>

Результат

Спецификации

Совместимость с браузерами

См. также

• Основы раскладки сетки: изменение размера дорожек с помощью minmax()
• CSS-сетки, логические значения и режимы письма
• Видео: Знакомство с minmax()