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

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

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

Синтаксис

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

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

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

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

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

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

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

Статические значения длины

Есть два основных способа использования мин Макс() функция с значения статической длины.

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

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

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

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

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

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

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

Динамические значения длины

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

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

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

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

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

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

Вот результат:

Объединить статические и динамические значения

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

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

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

мин-контент, макс-контент, а также авто ключевые слова

Есть третий вид стоимости мы можем назначить мин Макс() функция. мин-контент, макс-контент, а также авто ключевые слова связывают размеры дорожки сетки с содержание, которое оно содержит.

макс-контент

макс-контент ключевое слово указывает браузеру, что столбец сетки должен быть столь же широкий как самый широкий элемент, который это содержит.

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

 .container grid-template-columns: max-content 1fr 1fr; / ** * То же самое с нотацией minmax (): * grid-template-columns: minmax (max-content, max-content) 1fr 1fr; * / 

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

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

мин-контент

мин-контент ключевое слово указывает браузеру, что столбец сетки должен быть таким же широким, как узкий элемент, который он содержит, таким образом, что не приводит к переполнению.

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

 .container grid-template-columns: min-content 1fr 1fr; / ** * То же самое с нотацией minmax (): * grid-template-columns: minmax (min-content, min-content) 1fr 1fr; * / 

Я оставил зеленый фон под изображением, чтобы вы могли видеть полный размер первой ячейки сетки..

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

Если ячейка сетки содержала текстовую строку, мин-контент было бы равна ширине самого длинного слова, поскольку это самый маленький элемент, который не может быть уменьшен без переполнения. Вот отличная статья BitsOfCode, где вы можете увидеть, как мин-контент а также макс-контент вести себя, когда ячейка сетки содержит текстовую строку.

С помощью мин-контент а также макс-контент все вместе

Если мы использование мин-контент а также макс-контент все вместе внутри мин Макс() Функция мы получаем столбец сетки, который:

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

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

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

авто

Наконец, мы также можем использовать авто ключевое слово в качестве аргумента мин Макс() функция.

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

Когда это используется как минимум, его значение определяется мин-ширина / мин-высота правило, которое означает, что авто иногда идентично мин-контент, но не всегда.

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

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

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

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

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

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