minmax()
minmax() это CSS функция, определяющая диапазон размеров, который больше или равен min и меньше или равен max. Используется в CSS Grids.
Синтаксис
Функция принимает два параметра, min и max.
Каждый параметр может быть значением <length> , либо <percentage> , либо <flex> , или одним из ключевых слов max-content , min-content , или auto .
Если max < min, то max игнорируется и minmax(min,max) обрабатывается как min. As a maximum, a <flex> value sets the flex factor of a grid track; it is invalid as a minimum.
Значения
A non-negative length.
A non-negative percentage relative to the inline size of the grid container in column grid tracks, and the block size of the grid container in row grid tracks. If the size of the grid container depends on the size of its tracks, then the <percentage> must be treated as auto . The user agent may adjust the intrinsic size contributions of the track to the size of the grid container and increase the final size of the track by the minimum amount that would result in honoring the percentage.
A non-negative dimension with the unit fr specifying the track’s flex factor. Each <flex> -sized track takes a share of the remaining space in proportion to its flex factor.
Represents the largest max-content contribution of the grid items occupying the grid track.
Represents the largest min-content contribution of the grid items occupying the grid track.
As a maximum, identical to max-content . As a minimum it represents the largest minimum size (as specified by min-width / min-height ) of the grid items occupying the grid track.
Подробности об использовании CSS-функции minmax() в Grid-макетах
Существует множество руководств, в которых рассматриваются общие вопросы работы с CSS Grid, с механизмом, позволяющим создавать сеточные макеты. Я и сам немало об этом писал. Но я обратил внимание на то, что у многих разработчиков возникают сложности с использованием CSS-функции minmax() . Пожалуй, дело тут в том, что большинство существующих публикаций на эту тему либо не вдаются в детали, либо не включают в себя достаточного количества пояснений и примеров из реального мира. А minmax() — это очень мощная и полезная функция. Именно по этой причине я и решил написать данную статью. Это — нечто вроде «полного руководства по minmax() », задача которого — дать читателям то, чего не дают им другие публикации на эту тему.
Здесь мы в подробностях обсудим возможности функции minmax() в применении к сеточным макетам, поговорим о том, как, когда и почему ей стоит пользоваться. Тот, кто проработает эту статью, сможет полноценно и со знанием дела применять эту функцию в своих проектах.
Общие вопросы использования minmax() в Grid-макетах
В спецификации CSS о функции minmax(min, max) сказано, что она определяет диапазон размеров, которые больше или равны min и меньше или равны max .
Эту функцию можно использовать в качестве значения, задающего параметры столбцов или строк Grid-макета. Рассмотрим простой пример:
Вот как это будет выглядеть на схеме.
Результат применения функции minmax() при создании Grid-макета
Проанализируем этот макет:
- Здесь имеется сетка с тремя столбцами.
- Ширина первого столбца задана как minmax(200px, 500px) . Минимальная ширина этого столбца составляет 200px , максимальная — 500px .
- Два других столбца имеют ширину 1fr . Это означает, что они займут оставшееся свободное пространство.
Горизонтальная полоса прокрутки
В результате оказывается, что функция minmax() , сама по себе, не поддерживает создание отзывчивых макетов. А это значит, что поведением страницы приложения на экранах разной ширины нам нужно управлять самостоятельно. Ниже, в разделе практических примеров, мы к этому вернёмся.
Проверка правильности использования функции minmax()
Если значение min , переданное функции minmax(min, max) , больше значения max , то значение max будет проигнорировано. В результате в конструкции minmax(min, max) реально использоваться будет лишь минимальное значение.
Если значение min больше значения max — значение max игнорируется
Кроме того, важно помнить о том, что значение вроде 1fr нельзя использовать в качестве значения min . Оно может быть использовано только в роли значения max . При этом подобная ситуация хуже, чем та, когда min больше, чем max ! Система проигнорирует всю конструкцию, содержащую подобное объявление.
Нельзя использовать 1fr в качестве значения min
Использование нуля в качестве значения min функции minmax()
Что произойдёт в том случае, если попытаться воспользоваться конструкцией вида minmax(0, 500px) ? Пожалуй, вы уже знаете ответ на этот вопрос. Ширина столбца будет, как минимум, нулевой, и при этом она не превысит 500px . То есть — ширина столбца будет меняться в достаточно широких пределах.
Ширина столбца может изменяться в диапазоне от 0 до 500px
Простой сеточный макет
Представим, что нам надо создать сеточный макет, состоящий из 3 колонок. Мы поступим так:
Колонки будут иметь минимальную ширину в 200px . Вот как они будут выглядеть.
Макет, минимальная ширина столбцов которого равна 200px
Избежать троекратного повторения конструкции minmax(200px, 1fr) можно, воспользовавшись функцией repeat() :
Вышеприведённые стили вполне работоспособны, но пользоваться подобными конструкциями не рекомендуется. Поговорим о том, почему это так.
▍Ручное изменение количества столбцов
Если в подобном макете понадобится изменить количество столбцов, то делать это нужно будет вручную, редактируя код. Как по мне, так это не имеет смысла. Технология CSS Grid способна на большее, чем может показаться на первый взгляд.
▍Проблема появления горизонтальной полосы прокрутки
Вышеописанный приём управления количеством столбцов сеточного макета может привести к появлению горизонтальной полосы прокрутки. Дело в том, что мы жёстко задаём количество столбцов. В результате браузер не может их переупорядочить в том случае, если ширина области просмотра окажется слишком маленькой. В результате и появляется горизонтальная полоса прокрутки.
Горизонтальная полоса прокрутки
Как справиться с этой проблемой? Надо сообщить браузеру о том, что количество столбцов должно быть уменьшено в том случае, если ширины области просмотра недостаточно для вывода всего макета.
При разработке Flexbox-макетов это делается путём добавления свойства flex-wrap: wrap к родительскому элементу макета:
Flexbox-макет, в котором используется свойство flex-wrap: wrap, и макет, в котором это свойство не используется
При проектировании Grid-макетов для достижения подобного эффекта можно воспользоваться ключевыми словами auto-fill и auto-fit .
Сеточный макет, в котором применяются auto-fit/auto-fill, и макет, в котором эти ключевые слова не применяются
Использование ключевых слов auto-fit и auto-fill
Для того чтобы справиться с проблемой жёсткой настройки количества столбцов сеточного макета, мы можем воспользоваться возможностями ключевых слов auto-fit и auto-fill . При этом надо отметить, что между ними существует довольно-таки тонкое различие.
Так, при использовании auto-fit и при наличии свободного места элементы сетки будут растянуты. А применение auto-fill приводит к тому, что элементы растягиваться не будут. В результате дополнительное свободное пространство окажется незанятым, ширина элементов меняться не будет.
Результаты применения ключевых слов auto-fill и auto-fit
При использовании этих ключевых слов может получиться один и тот же результат. Это зависит от ширины области просмотра страницы. Но при определённой ширине области просмотра различия между ними будут уже вполне заметными.
Вот видеозапись, в которой показано поведение макетов, созданных, соответственно, с использованием auto-fill и auto-fit .
Исследование поведения макетов, созданных с использованием ключевых слов auto-fill и auto-fit
▍Распределение свободного пространства между столбцами auto-fit-макета
Вот видео, в котором прямоугольник, обведённый пунктирной линией, представляет свободное пространство. Когда, при использовании ключевого слова auto-fit , ширина области просмотра достаточно велика, браузер «свернёт» это свободное пространство и распределит его ширину между элементами сетки.
Распределение свободного пространства между столбцами auto-fit-макета
▍Распределение свободного пространства между столбцами auto-fill-макета
Если говорить о применении ключевого слова auto-fill , то тут браузер поступает со свободным пространством иначе. А именно, при увеличении ширины области просмотра ширина элементов не увеличивается. При этом размер свободного пространства (оно, в этом видео, выделено пунктиром) растёт.
Распределение свободного пространства между столбцами auto-fill-макета
Сценарии использования и практические примеры
▍Карточки, основанные на сеточном макете
Полагаю, что функцию minmax() чаще всего используют для оформления карточек, применяя её при создании элемента-контейнера.
Когда я начал изучать технологию Grid, я неуютно чувствовал себя, глядя на свойство grid-template-columns , использованное в этом примере. Тут важно обратить внимание на то, как поведёт себя страница в областях просмотра, ширина которых меньше 250px . Дело в том, что в таких ситуациях на экране появится горизонтальная полоса прокрутки.
Появление горизонтальной полосы прокрутки в области просмотра, ширина которой меньше 250px
Решить эту проблему можно двумя способами. Первый заключается в использовании медиа-запросов. В основе этого способа лежит идея, в соответствии с которой grid-template-columns устанавливается в 1fr . А когда ширина области просмотра достаточно велика — применяется minmax() :
Второй подход к решению этой проблемы заключается в использовании CSS-функций сравнения. Это — современное решение. Поэтому перед его использованием нужно убедиться в том, что оно поддерживается браузером.
Я использовал тут, в качестве первого значения функции minmax() , функцию сравнения min() . Вот что здесь происходит:
- Если ширина области просмотра меньше, чем 250px , первым значением, передаваемым minmax() , будет 100% ширины родительского элемента.
- Если ширина области просмотра будет больше, чем 250px , тогда первым значением minmax() будет 250px .
▍Использование единицы измерения ch при настройке элемента-контейнера
Мне кажется интересным пример использования функции minmax() при создании макета, предназначенного для отображения материалов статей. В данном примере содержимое статьи центровано по горизонтали.
Первый и последний столбцы играют вспомогательную роль, управляя свободным пространством. Нас тут интересует центральный столбец. Обратите внимание на то, что при его настройке использована конструкция вида minmax(auto, 70ch) . Это означает, что максимальной шириной данного столбца является ширина, которую занимают 70 символов, выстроенных в одну строку. Это — идеальное количество символов на строку, обеспечивающее комфортное чтение текста.
Макет, предназначенный для вывода текста статьи
Этот макет будет хорошо смотреться на экранах разных размеров, в том числе — на мобильных устройствах. Дело в том, что ширина первой и последней колонок может уменьшаться вплоть до минимального значения, соответствующего 1rem . Вот как эта страница будет выглядеть на узком экране мобильного устройства.
Статья на экране мобильного устройства
▍Проблема, возникающая при необдуманном использовании ключевого слова auto-fit
У того, кто впервые узнал о ключевом слове auto-fit , может возникнуть желание использовать его повсюду. Но тут есть одна проблема, которая проявляется тогда, когда содержимое сетки (например — количество карточек) меняется, а разработчик не контролирует это содержимое.
Тут описана сетка, используемая для вывода карточек. Когда имеется 4 карточки — макет выглядит замечательно. Но если карточка всего одна — она растянется на всё свободное пространство.
Проблема необдуманного использования auto-fit
Это никуда не годится. Дело в том, что если у компонента-карточки имеется некое изображение и текст, то изображение будет растянуто так, чтобы оно заняло бы всю ширину карточки. В результате выглядеть такое изображение будет очень плохо. Вот изображение, иллюстрирующее эту проблему.
Вывод карточки с изображением
Полагаю, теперь суть этой проблемы совершенно очевидна. Поэтому предлагаю пользоваться ключевым словом auto-fit ответственно. В описанной ситуации им вполне можно воспользоваться тогда, когда в карточках нет изображений. Если же в карточках имеются изображения — пользоваться auto-fit я не рекомендую.
Математические функции в CSS
В CSS есть математические функции, их всего четыре: min() , max() , clamp() и calc() .
Математика в каком-то виде есть и в препроцессорах, например, в SCSS есть min() , max() и clamp() , в Less — min() и max() , но есть пара существенных отличий. Во-первых, в препроцессорах всё рассчитывается один раз при компиляции, и в итоговом файле всегда будут фиксированные значения. А во-вторых, в препроцессорных функциях нельзя сочетать разные единицы измерения.
Например, не получится сделать значение на основе пикселей, зависящее от единиц вьюпорта. Вот этот пример работать не будет (это SCSS):
Компилятор будет ругаться на несочетаемые единицы.
Но если перенести рассчеты в calc() , всё будет работать:
calc() сможет сложить пиксели и единицы вьюпорта. Это позволит сделать плавающий размер шрифта, который будет зависеть от ширины окна браузера. Препроцессоры так не умеют.
Таким образом, главное преимущество математических функций в CSS — динамичность значений благодаря способности сочетать абсолютные и относительные единицы измерения.
Ещё важно помнить, что при использовании препроцессоров CSS-функции могут конфликтовать с препроцессорными. Например, если в SCSS или в Less написать такое:
компилятор будет ругаться на несовместимые единицы, потому что сработает функция из препроцессора.
Чтобы препроцессоры при компиляции не пытались выполнить CSS-функции, в SCSS предлагается писать имя функции с заглавной буквы:
Подробнее об этом можно почитать в статье Аны Тюдор When Sass and New CSS Features Collide.
В LESS поможет оборачивание кавычками:
или компиляция с использованием параметра math со значением strict .
min(), max()
Функция min() возвращает минимальное из переданных значений, max() — максимальное. При использовании процентов или относительных единиц выбираемое значение будет динамическим и будет зависеть от внешних условий. Например:
Если поресайзить окно с примером, можно увидеть как это работает.
Если вычисленное значение для 50% меньше 350px , ширина блока будет равна 50% . Как только 50% станет больше 350px , функция min() выберет меньшее значение, то есть 350px , и дальше блок тянуться не будет.
Функция min() будет выбирать подходящее значение учитывая ширину окна в данный момент.
Этот код не делает ничего особенного, что не умел бы CSS без математических функций: точно такое же поведение можно получить задав width и max-width :
Оба варианта для сравнения:
Порастягивайте демо, чтобы увидеть, что разницы в поведении блоков нет.
На первый взгляд, min() и max() не делают ничего интересного, но если подумать, как много мест в CSS, где можно управлять диапазоном значений?
Это доступно только для ширины и высоты:
- width , min-width , max-width
- height , min-height , max-height
и их аналогов, привязанных к направлению письма:
- inline-size , min-inline-size , max-inline-size
- block-size , min-block-size , max-block-size
У нас нет, например, max-font-size или min-border-width , но благодаря математическим функциям, можно добавить умную динамику практически в любое значение. Например, в размер шрифта:
Поресайзите демо, и вы увидите, что при растягивании шрифт будет бесконечно расти, но при сужении, как только 5vw станет меньше или равным 20px , размер шрифта застынет на этом значении.
Если попытаться реализовать подобное на JS, пришлось бы отслеживать ресайз окна, получать вычисленное значение, и при превышении заданного порога, фиксировать значение на определённом уровне. При использовании min() и max() браузер всё делает сам: отслеживает изменение значений и, при необходимости, фиксирует их — нам нужно просто выбрать функцию и задать диапазон значений.
Это будет работать во всех свойствах, которые используют размеры, в том числе в тенях, градиентах и прочем. Пример с box-shadow :
Размер тени будет зависеть от размера окна браузера, минимальное значение — 45px .
Экспериментируя с функциями min() и max() можно заметить, что они дают возможность управлять или минимальным значением, или максимальным, но нельзя контролировать и то, и другое одновременно. Хотя совершенно логичным выглядит желание, например, задать размер шрифта, который будет расти в диапазоне от минимального значения до максимального и не выходить за эти значения.
Для такого есть ещё одна функция:
clamp()
Она сочетает в себе min() и max() . Функция получает на вход параметры:
И вычисляет значение вот таким образом:
Проще всего её понимать представляя среднее значение ( VAL ) как желаемое, которое ограничено минимальным и максимальным значениями. Например, этот код
описывает следующее поведение: размер шрифта равен 5vw , но не меньше 20px и не больше 40px . Порастягивайте демо, чтобы увидеть как это работает:
Аналогичный подход часто используется при разработке адаптивных сайтов: мы задаём минимальное и максимальное значения ширины страницы, позволяя ей тянуться и сжиматься в заданных пределах, например, в диапазоне от 320px до 1200px :
Используя clamp() это можно записать в одну строчку:
Для следующего демо я взяла значения поменьше, но смысл тот же: блоки тянутся в пределах от 200px до 400px . Ширина верхнего блока управляется с помощью min-width и max-width , нижнего — с помощью clamp() :
Оба блока ведут себя совершенно одинаково, разница только в возможностях этих подходов: clamp() позволяет добавить умную динамику значений в любое свойство, не только в размеры блоков. Мне нравится идея использовать clamp() для адаптивных шрифтов, почитать про это можно в статье Linearly Scale font-size with CSS clamp() Based on the Viewport.
Предыдущие функции достаточно просты по сравнению с calc() , самой мощной и интересной.
Функция позволяет производить математические операции:
- сложение
- вычитание
- умножение
- деление
В отличие от препроцессорных вычислений, calc() позволяет сочетать любые совместимые значения. Например, можно вычесть пиксели из процентов:
Препроцессоры так не умеют, потому что на момент компиляции CSS неизвестно чему равны 100% , но у браузера эти данные есть, следовательно, он может взять 100% , перевести их в пиксели и вычесть из них 20px . Кроме того, браузер пересчитает значение, если ширина элемента изменится.
Внутри calc() можно использовать кастомные свойства, и это делает вычисления в CSS гораздо мощнее препроцессорных. Например, на calc() и кастомных свойствах можно без каких-либо скриптов сделать простой генератор цветовых схем:
По клику на цвет в CSS меняется значение CSS-переменной, и вся палитра пересчитывается.
Рассчёт оттенка ( hue из HSL) делается таким образом:
И затем оттенок используется для формирования цвета в формате HSL:
Конечно, подобные вещи удобнее и логичнее делать на JS, демо просто показывает, что CSS достаточно мощный, чтобы уметь такое.
Примеры использования
Cохранение логики рассчётов
Например, если нужна ширина в 1/12 от общей, можно высчитать значение и записать его в стили:
Но так непонятно что это за число. Станет немного понятнее, если логику рассчёта положить рядом в комментарии:
А если использовать calc() , можно само математическое выражение сделать значением:
Так сразу понятно, что элемент занимает 1/12 ширины родителя, и не нужно поддерживать комментарии в актуальном состоянии.
Управление размерами элементов
Например, есть карточка с картинкой, картинка ужимается под ширину колонки с текстом:
Как растянуть картинку на ширину карточки не привязываясь к размерам карточки? С помощью calc() :
Можно ещё немного улучшить код, используя кастомные свойства:
Так сохранится логика рассчётов, 1rem становится не магическим числом, а именованной переменной, и по самому коду будет понятно, что ширина картинки увеличивается на два паддинга, а потом сдвигается влево на один. Можно примерно понять что делает этот код даже не глядя на страницу в браузере.
Ещё это будет полезно для инпутов. Допустим, нужно, чтобы инпут тянулся на всю ширину родителя, оставляя 40 пикселей справа. Вариант с фиксированной шириной не подходит для адаптивного дизайна. Если просто задать ширину 100% и марджин, блок растянется на всю ширину и сжиматься не будет. С этой задачей прекрасно справится calc() :
Текстовое поле всегда будет отодвинуто от края на 40px (+ паддинг) независимо от размера родительского элемента.
Адаптивная типографика
С помощью calc() можно примешивать единицы вьюпорта к обычному размеру шрифта, тогда при увеличении размеров экрана будет расти и шрифт:
Порастягивайте демо, чтобы увидеть как размер окна влияет на размер шрифта:
Почитать об этом больше можно тут или тут.
Мне больше нравится вариант с clamp() , который не только позволяет шрифту расти, но и задаёт ему верхнюю и нижнюю границы.
Управление размерами фона
С помощью calc() можно задать размер фоновому изображению, комбинируя фиксированные единицы и проценты. Например, чтобы фон всегда отступал от краёв на определённое значение:
Полосатые поля показывают прозрачные области вокруг разноцветного градиента.
Используя этот же подход можно делать вырезанные углы квадратной формы:
В отличие от версии с коническими градиентами, этот вариант будет работать во всех браузерах. Способ был предложен Ильёй Стрельциным.
Также можно рисовать линейными градиентами полосы заданной ширины:
Вычисление цветов и шагов градиента
Иногда для экспериментов нужен полосатый градиент. Чтобы не считать параметры руками, их можно вычислять с помощью calc() на основе кастомных свойств. Вот так задаются параметры:
А вот так потом высчитывается оттенок:
И точка остановки:
Редактируя переменные можно менять параметры градиента без необходимости пересчитывать вручную шаги или переписывать весь градиент.
Правда, при таком автоматическим вычислении оттенков могут получаться не очень красивые цвета, но для экспериментов вполне пойдёт.
Область применения cacl() гораздо шире перечисленных примеров. В некоторых случаях, если значения не должны меняться динамически, с подобными задачами справятся и препроцессоры, но если должны, например, при изменении кастомных свойств или размера окна, — без calc() не обойтись.
Нюансы
При использовании calc() нужно помнить о некоторых тонкостях:
- арифметический знак всегда нужно окружать пробелами, чтобы браузер мог правильно разобрать выражение. Например, width: calc(100% -50px) не будет работать, правильно так: width: calc(100% — 50px) . Для умножения и деления это требование не является обязательным, но лучше всегда добавлять пробелы, чтобы сохранить код единообразным и легко читаемым;
- делить на ноль нельзя, в результате будет ошибка;
calc() умеет производить рассчёты только для совместимых единиц. Например, можно сложить пиксели с процентами или единицами вьюпорта, градусы с радианами и вычесть миллисекунды из секунд, но вот сложить секунды с пикселями или градусы с единицами вьюпорта ожидаемо не получится, потому что непонятно в каких единицах ожидается результат.
У меня была слегка безумная идея привязать градусы градиента к ширине вьюпорта (и вращать градиент растягивая окно браузера), но я не придумала как это можно реализовать, и не уверена, что это в принципе возможно без JS;
Светлое будущее?
В спецификации есть интересный момент: утверждается, что внутри calc() в качестве значений можно использовать содержимое атрибутов, да и в принципе можно использовать атрибуты как значения CSS-свойств.
От обычного использования attr() в качестве содержимого псевдоэелемента это отличается указанием типа содержимого:
Или единиц измерения:
Значение после запятой — запасное, на случай, если не удастся получить или распарсить значение атрибута.
Поначалу эта конструкция показалась мне странной: зачем класть данные в атрибуты, а потом ещё и типизировать их в CSS, если можно сразу положить нужное в кастомные свойства?
Но в твиттере мне быстро накидали примеров, когда это было бы действительно удобно. Например, получая размеры из атрибутов было бы удобно делать адаптивные картинки и фреймы. У меня получилось сделать адаптивное видео, используя кастомные свойства, но для этого приходится дублировать размеры в инлайновых стилях. Если бы можно было считывать значения из атрибутов, без дублирования можно было бы обойтись.
На момент написания статьи это не поддерживается ни одним браузером, но есть некоторая надежда, что однажды это заработает, потому что подобное использование атрибутов описано в спецификации свойства, которое помогло бы управлять соотношением сторон: aspect-ratio. Там есть такой пример:
И вот это было бы очень круто, потому что избавило бы разработчиков от необходимости городить странные конструкции для решения той же задачи. Почитать про aspect-ratio можно в статье Рэйчел Эндрю Designing An Aspect Ratio Unit For CSS.
Также не так давно в черновики были добавлены другие математические функции, например, mod() , round() , sin() и многие другие. Это совсем свежее добавление, новые функции ещё нигде не поддерживаются.
Поддержка браузерами
min() , max() , clamp() и calc() поддерживаются в большинстве современных браузеров, их поддержка примерно совпадает с кастомными свойствами. И то, и другое не работает в IE11.
При необходимости проверить поддержку функций и кастомных свойств можно воспользоваться @supports (также учитывая поддержку браузерами для него):
Сколько аргументов принимает функция min max
One incredibly useful new feature introduced with the CSS Grid Layout Specification is the minmax() function. This function opens the door to us being able to write much more powerful and succinct CSS by allowing us to set, as a value for a grid track, a function including both a minimum and maximum value.
The minmax() Function
The minmax() function accepts two parameters, a minimum value and a maximum value.
If the maximum value defined is actually less than the minimum, it is ignored, and the function is treated as purely presenting a minimum value.
The minmax() function accepts 6 types of value:
- Length
- Percentage
- Flexible Length
- max-content
- min-content
- auto
Let’s consider examples of each.
Length
Perhaps the most simple value we can use with the minmax() function is a basic length. Take, for example, this simple grid, which has three columns and a single row.
Using the minmax() function, we can specify that the yellow grid cell remain between 100px and 200px. As the viewport is resized, the absolute value will change, but always within these two limits.
The second and third columns shrink and expand to fill the remaining available space equally, but the first column always remains between 100px and 200px wide.
Percentage
Besides the basic length units, we can also use percentage units with the minmax() function. Say, for example, that we want the yellow grid cell to take up a maximum of 50% of the grid, but not get any smaller than 200px.
No matter how small we shrink the viewport, the yellow cell never gets smaller than 200px. But, when it has the room to, is grows to a maximum of half the grid width.
Flexible Length
The Flexible Length is a new unit which, like the minmax() function, was also introduced with the CSS Grid Layout Specification. This length, which uses the fr unit, represents a fraction of the free space in the grid container. For example, let’s say we have a 100px-wide grid, with 2 columns. One column has a fixed width of 20px and the other column has a width of 1fr. The second column will effectively have a width of 80px, as it takes up the remaining available space within the grid.
Currently, the fr unit can only be used as the maximum value in the minmax() function (although it is noted in the spec that, in the future, it may be applicable to the minimum value as well). Going back to our example, we can specify that we want the yellow grid cell to be a minimum of 200px. If the viewport is resized larger than that, we want the cell to be 1fr, the same size as the other two columns.
Since all columns are 1fr at larger viewport sizes, they share an equal amount of space within the grid.
max-content
The max-content keyword is a special value that represents the cell’s «ideal size». This is the smallest possible size the cell can be, while still fitting around it’s contents unobtrusively. For example, if the contents of the cell is a sentence, the ideal width for the cell will be to take up the entire length of the sentence, regardless of the length and no line breaks.
Taking our previous example, let’s specify that the yellow grid cell be both a minimum and maximum of max-content .
As we can see, the size of the column expands to fit the entire length of the string. Since both the minimum and maximum values are set to max-content , the width of the column remains the same.
min-content
The min-content keyword, like max-content , is a special value. It represents the smallest possible size the cell can be that does not lead to an overflow, unless that overflow is unavoidable.
To illustrate the difference between min-content and max-content , we can use the same content as in the previous example, but set both values of the minmax() function to min-content .
We can see that the content within the cell is shifted in order to take up the least amount of horizontal space possible, without causing any overflow.
Finally, we have auto . This has different meanings depending on if it is used as the maximum or minimum value in the minmax() function.
If used as a maximum, the auto value is equivalent to the max-content value. If used as a minimum, the auto value represents the largest minimum size the cell can be. This «largest minimum size» is different from the min-content value, and specified by min-width / min-height .
To illustrate this, here’s what happens when the yellow grid cell in our example is set to an auto minimum and maximum.
Using the minmax() Function: Responsive Design without Media Queries
As we have seen, there are several cases where using the minmax() function is suitable, and we can use it in several ways. But perhaps the most popular and useful case for the minmax() function it’s ability to enable us create responsive designs without the use of any media queries.
Let’s take this example grid:
Each column in the grid has a minimum width of 200px. As the viewport is resized, the number of columns changes to fit their ideal width. With CSS Grid and the minmax() function, this can be created in as little as 2 lines of CSS —
Besides the minmax() function, there are two other key parts to this:
- repeat() : This function allows us to specify the same value for multiple columns in the grid. It accepts two values: the number of times to repeat, and the value to be repeated.
- auto-fit : This keyword can be used with the repeat() function instead a number of times to repeat. This will flexibly change the number of columns that are used based on the width each column can be.
One, in my opinion quite major, limitation of this technique, however, is that it only works when each column is of equal width. We have to use the repeat() function with the auto-fit keyword, as this is what allows the number of columns to be flexible. Nonetheless, this can still an extremely useful technique in the right circumstances.
Как работает функция minmax()
SelenIT