Одна з неймовірно корисних новинок специфікації CSS Grid Layout - функція minmax (). Ця функція відкриває нам можливість писати більш потужний і лаконічний CSS, дозволяючи задавати в якості значення для грід-смуги функцію, що включає і мінімальне, і максимальне значення.
Функція minmax ()
Функція minmax () приймає два параметри, мінімальне значення і максимальне.
Якщо вказане максимальне значення виявиться меншою, ніж мінімальний, воно ігнорується, і функція сприймається як представляє тільки мінімальне значення.
Функція minmax () приймає 6 типів значень:
Розглянемо приклади кожного з них.
Напевно, найпростіше значення, що ми можемо використовувати з функцією minmax () - звичайна довжина. Візьмемо, наприклад, цей простий грід, з трьома колонками і одним рядом.
За допомогою функції minmax () ми можемо вказати, що жовта грід-осередок залишається в межах від 100px до 200px. При зміні розмірів вікна абсолютне значення буде змінюватися, але завжди між цими межами.
Друга і третя колонки стискаються і розширюються до заповнення залишку вільного місця порівну, але перша завжди залишається шириною від 100px до 200px.
Крім звичайних одиниць довжини, з функцією minmax () можна використовувати і відсотки. Припустимо, наприклад, що ми захотіли, щоб жовта грід-осередок займала максимум 50% гріда, але не утискувати менше 200px.
Як би ми не звужували вікно браузера, жовта осередок ніколи не стане менше 200px. Але коли місце є, вона розтягується до максимуму в половину ширини гріда.
гнучкі розміри
Гнучкі розміри - нова одиниця, теж введена специфікацією CSS Grid Layout, як і функція minmax (). Ця величина, для якої використовується одиниця fr. являє собою частку вільного простору в грід-контейнері. Наприклад, скажімо, у нас є грід шириною 100px з двома колонками. У однієї колонки фіксована ширина 20px. а в іншої ширина 1fr. У другій колонки фактично буде ширина 80px. оскільки вона займає все вільне місце в гріді.
На даний момент одиниця fr може використовуватися тільки для максимального значення в функції minmax () (хоча в специфікації відзначено. Що в майбутньому може з'явитися можливість застосовувати її і для мінімального значення). Повертаючись до нашого прикладу, можна вказати, що наша жовта осередок повинна бути шириною мінімум 200px. Якщо вікно браузера стане ширше цього, ця комірка повинна бути розміром 1fr. тобто дорівнює двом іншим колонок.
Оскільки при великих розмірах вікна ширина всіх колонок 1fr, вони ділять простір в гріді порівну.
max-content
Ключове слово max-content - спеціальне значення, що представляє собою «ідеальний розмір» осередки. Це найменший можливий розмір осередку, при якому вміст вміщується в ній вільно. Наприклад, якщо вміст комірки - пропозиція тексту, ідеальної шириною осередку буде повна довжина цієї пропозиції, якщо записати його в один рядок без переносів.
Якщо взяти наш попередній приклад, давайте зазначимо для жовтої грід-осередки і мінімальний, і максимальний розмір, рівний max-content.
Як видно, колонка розтягується в ширину, щоб вмістити всю довжину рядка. Оскільки і максимальному, і мінімального значень вказано max-content. ширина колонки залишається постійною (прим. перекл. того ж ефекту можна було б досягти і безminmax, вказавши простоgrid-template-columns: max-content 1fr 1fr).
min-content
Ключове слово min-content. як і max-content - особливе значення. Воно являє собою найменший можливий розмір, при якому в осередку ще не виникає переповнення, якщо цього переповнення можна хоч якось уникнути.
Щоб показати відмінність між min-content і max-content. можна взяти вміст з попереднього прикладу, але в обидва значення для функції minmax () підставити min-content.
Видно, що вміст комірки переноситься так, щоб займати якомога менше місця по горизонталі, не викликаючи переповнення.
Нарешті, у нас є auto. Залежно від того, використовується воно як максимальне або мінімальне значення у функції minmax (). його сенс змінюється.
Якщо значення auto використовується в якості максимуму, воно еквівалентно значенням max-content. А якщо в якості мінімуму, то значення auto є найбільший мінімальний розмір для осередку. Цей «найбільший мінімальний розмір» відрізняється від значення min-content і задається властивостями min-width / min-height.
В якості ілюстрації - ось що відбувається, якщо задати жовтої грід-осередку в нашому прикладі auto для мінімуму і максимуму.
Використання функції minmax (). чуйний дизайн без медіавираженій
Як ми бачили, використання функції minmax () підходить в декількох випадках, і її можна використовувати кількома способами. Але, напевно, найпопулярніше і корисне застосування функції minmax () - можливість створювати чуйні макети без допомоги будь-яких медіавираженій.
Візьмемо для прикладу такий грід:
У кожної колонки в гріді мінімальна ширина 200px. При зміні розмірів вікна браузера число колонок змінюється, щоб вмістити їх ідеальну ширину. За допомогою CSS-Грід і функції minmax () це робиться лише 2 рядками CSS:
Крім функції minmax (). тут ще два ключових моменти:
- repeat (). ця функція дозволяє нам вказувати одне і те ж значення для кількох колонок в гріді. Вона приймає два значення: кількість повторень і значення, яке треба повторити.
- auto-fit. це ключове слово можна використовувати з функцією repeat () замість кількості повторень. Воно гнучко змінює використовується число колонок в залежності від ширини кожної з них.
Правда, одне, на мій погляд серйозне, обмеження цього прийому - то, що це працює тільки при рівній ширині всіх колонок. Ми змушені користуватися функцією repeat () з ключовим словом auto-fit. так як це дає можливість зробити число колонок гнучким. Але все ж і це може бути вкрай корисним рішенням у відповідних обставинах.
P.S. Це теж може бути цікаво:
Не минуло й півроку з останньої зміни робочого процесу W3C, як керівництву Консорціуму надійшла пропозиція застосувати нарешті цей новий процес на ділі. І списати вже неактуальні специфікації HTML в музей, щоб вони не заплутували розробників, «прикидаючись» актуальними.
Ще один модуль CSS, про який ми розповідали, непомітно дозрів до статусу, з якого W3C радить починати повсякденне використання новинок. Властивість contain дозволяє обмежувати зміни дерева відтворення, перерисовку CSS-боксів і зміни їх розмірів в межах елемента. Тому воно так важливо ...
ДАЛІ
З Парижа (на фото), де недавно проходила зустріч робочої групи CSS, прилетіла цікава новина: властивості grid-row-gap і grid-column-gap, а також їх скорочення grid-gap ...