Как использовать minmax () CSS Grid

Модуль CSS Grid Layout выводит адаптивный дизайн на новый уровень, предлагая новый тип гибкости, которого никогда не было. Теперь мы можем не только определять собственные сетки с невероятной скоростью исключительно с помощью чистого CSS, но CSS Grid также имеет много скрытых драгоценных камней, которые позволяют нам дополнительно настраивать сетку и создавать сложные макеты.

мин Макс() функция является одной из этих менее широко известных функций. Это позволяет определить размер дорожки сетки от минимального до максимального диапазона, чтобы сетка могла наилучшим образом адаптироваться к области просмотра каждого пользователя.

Читайте также: Введение в модуль CSS Grid Layout

Синтаксис
Синтаксис функции minmax () относительно прост, он принимает два аргумента: минимальное и максимальное значение:

минмакс (мин, макс)

Минимальное значение должно быть меньше максимального, иначе максимальное игнорируется браузером.

Мы можем использовать функцию minmax () в качестве значения свойства grid-template-columns или grid-template-lines (или обоих). В нашем примере мы будем использовать первый, так как это гораздо более частый вариант использования.

.container {
  дисплей: сетка;
  Сетка-шаблон-столбцы: minmax (100px, 200px) 1fr 1fr;
  сетки-шаблоны-строки: 100px 100px 100px;
  разрыв сетки: 10 пикселей;
}

В демонстрационной программе Codepen ниже вы можете найти код HTML и CSS, который мы будем использовать в этой статье.

Увидеть перо Начальная демонстрация для функции minmax () CSS HONGKIAT (@hkdc) на CodePen,

Мы можем использовать различные виды значений внутри функции minmax (), все зависит от того, какой тип пользовательской сетки мы хотим создать.
Статические значения длины
Существует два основных способа использования функции minmax () со статическими значениями длины.

Во-первых, мы можем использовать minmax () только для одного столбца сетки и определять ширину других столбцов как простые статические значения (здесь пиксели).

столбцы сетки-шаблона: minmax (100px, 200px) 200px 200px;

На демонстрационном примере gif ниже вы можете видеть, что этот макет не адаптивен, однако первый столбец обладает некоторой гибкостью. Второй и третий столбцы сохраняют свою фиксированную ширину (200 пикселей), в то время как первый столбец варьируется от 100 до 200 пикселей в зависимости от доступного пространства.
Во-вторых, мы можем определить ширину более одного столбца сетки с помощью minmax (). Минимальное и максимальное значения являются статическими, поэтому по умолчанию сетка не реагирует. Однако сами столбцы являются гибкими, но только между 100px и 200px. Они растут и уменьшаются одновременно, когда мы меняем размер области просмотра.

столбцы сетки-шаблона: minmax (100px, 200px) minmax (100px, 200px)
                       minmax (100px, 200px);

Обратите внимание, что мы также можем использовать повторение() функция вместе с minmax (). Итак, предыдущий фрагмент кода также можно записать так:

grid-template-columns: repeat (3, minmax (100px, 200px));

Динамические значения длины
Помимо статических значений, функция minmax () также принимает в качестве аргументов процентные единицы и новую единицу дроби (fr). Используя их, мы можем создавать настраиваемые сетки, которые реагируют и изменяют свои размеры в соответствии с доступным пространством.

Приведенный ниже код приводит к сетке, в которой ширина первого столбца составляет от 50% до 80%, а второй и третий столбцы равномерно распределяют оставшееся пространство.

grid-template-columns: minmax (50%, 80%) 1fr 1fr;

Когда мы используем динамические значения с функцией minmax (), очень важно установить правило, которое имеет смысл. Позвольте мне показать вам пример, где сетка разваливается:

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

Это правило не имеет никакого смысла, так как браузер не может решить, какое значение присвоить функции minmax (). Минимальное значение приведет к ширине столбца 1fr 1fr 1fr, а максимальное – к 2fr 1fr 1fr. Но оба варианта возможны даже на очень маленьком экране. Браузер не может иметь ничего общего с этим.

Вот результат:
Объединить статические и динамические значения
Также возможно комбинировать статические и динамические значения. Например, в демонстрации Codepen выше я использовал minmax (100px, 200px) 1fr 1fr; Правило, которое приводит к сетке, где первый столбец колеблется между 100px и 200px, а оставшееся пространство равномерно распределяется между двумя другими.

Сетка-шаблон-столбцы: minmax (100px, 200px) 1fr 1fr;

Интересно наблюдать, что по мере увеличения области просмотра первый столбец увеличивается с 100 до 200 пикселей. Два других, управляемых модулем fr, начинают расти только после того, как первый достиг максимальной ширины. Это логично, так как целью единицы дроби является разделение доступного (оставшегося) пространства.
Мин-контент, макс-контент и авто ключевые слова
Есть третий тип значения, которое мы можем назначить функции minmax (). Ключевые слова min-content, max-content и auto связывают размеры дорожки сетки с содержимым, которое она содержит.
макс-контент
макс-контент Ключевое слово указывает браузеру, что столбец сетки должен быть настолько же широким, насколько это возможно для самого широкого элемента.

На демонстрации ниже я поместил изображение шириной 400px внутри первой дорожки сетки и использовал следующее правило CSS (вы можете найти демоверсию Codepen с полным измененным кодом в конце статьи):

.container {
  grid-template-columns: max-content 1fr 1fr;
  / **
  * То же самое с обозначением minmax ():
  * grid-template-columns: minmax (max-content, max-content) 1fr 1fr;
  * /
}

Я еще не использовал нотацию minmax (), но в приведенном выше комментарии к коду вы можете видеть, как будет выглядеть тот же код (хотя здесь это излишне).
Как вы можете видеть, первый столбец сетки имеет ширину самого широкого элемента (здесь изображение). Таким образом, пользователи всегда могут увидеть изображение в полном размере. Однако при определенном размере области просмотра эта компоновка не отвечает.
мин-контент
мин-контент Ключевое слово указывает браузеру, что столбец сетки должен быть настолько же широким, насколько и самый узкий элемент, который он содержит, таким образом, чтобы это не приводило к переполнению.

Давайте посмотрим, как выглядит предыдущая демонстрация с изображением, если мы изменим значение первого столбца на min-content:

.container {
  grid-template-columns: min-content 1fr 1fr;
  / **
  * То же самое с обозначением minmax ():
  * grid-template-columns: minmax (min-content, min-content) 1fr 1fr;
  * /
}

Я оставил зеленый фон под изображением, чтобы вы могли видеть полный размер первой ячейки сетки.
Как видите, первый столбец сохраняет наименьшую ширину, которую можно достичь без переполнения. В этом примере это будет определяться минимальной шириной 4-й и 7-й ячеек сетки, которая вытекает из свойств padding и font-size, поскольку изображение в первой ячейке может быть уменьшено до нуля без переполнения.

Если ячейка сетки содержит текстовую строку, минимальное содержимое будет равно ширине самого длинного слова, так как это самый маленький элемент, который не может быть уменьшен без переполнения. Вот отличная статья от BitsOfCode где вы можете увидеть, как ведут себя min-content и max-content, когда ячейка сетки содержит текстовую строку.
Совместное использование min-content и max-content
Если мы используем min-content и max-content вместе внутри функции minmax (), мы получим столбец сетки, который:

1. отзывчивый
2. не имеет переполнения
3. не растет шире своего самого широкого элемента

.container {
    grid-template-columns: minmax (min-content, max-content) 1fr 1fr;
}

Мы также можем использовать ключевые слова min-content и max-content вместе с другими значениями длины внутри функции minmax (), пока правило не станет понятным. Например, minmax (25%, max-content) или minmax (min-content, 300px) являются действительными правилами.
авто
Наконец, мы также можем использовать ключевое слово auto в качестве аргумента функции minmax ().

Когда auto используется как максимум, его значение идентично max-content.

Когда он используется как минимум, его значение определяется правилом min-width / min-height, что означает, что auto иногда идентично min-content, но не всегда.

В нашем предыдущем примере min-content соответствует auto, поскольку минимальная ширина первого столбца сетки всегда меньше его минимальной высоты. Итак, принадлежащее правило CSS:

.container {
    grid-template-columns: minmax (min-content, max-content) 1fr 1fr;
}

можно также написать так:

.container {
    grid-template-columns: minmax (авто, авто) 1fr 1fr;
}

Ключевое слово auto также может использоваться вместе с другими статическими и динамическими единицами (пиксели, единицы измерения, проценты и т. Д.) Внутри функции minmax (), например, minmax (auto, 300px) будет допустимым правилом.

Вы можете проверить, как ключевые слова min-content, max-content и auto работают с функцией minmax () в следующей демонстрационной программе Codepen:

Увидеть перо CSS Grid Layout – функция minmax () с min-content и max-content HONGKIAT (@hkdc) на CodePen,

Читайте также: перемещение элементов в макете CSS-сетки [Guide]