Розкладка сітки CSS Як використовувати minmax ()

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

The minmax () функції є однією з таких менш широко відомих особливостей. Це дозволяє визначити розмір доріжки сітки як мінімум до максимального діапазону так що сітка може адаптуватися до вікна перегляду кожного користувача найкращим чином.

Синтаксис

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

 minmax (min, max) 

The хв значення має бути меншим ніж макс, інакше макс браузер ігнорується.

Ми можемо використовувати minmax () функція як значення grid-template-колонки або grid-template-рядки власність (або обидва). У нашому прикладі ми будемо використовувати перше, оскільки це набагато частіше.

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

У демонстраційному коді Codepen нижче можна знайти Код HTML і CSS ми використаємо всю статтю.

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

Значення статичної довжини

Існує два основних способи використання minmax () функція з статичні значення довжини.

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

 grid-шаблон-колонки: minmax (100px, 200px) 200px 200px; 

На демонстраційній версії gif нижче можна побачити, що це макет не відповідає, однак у першому стовпці певна гнучкість. Друга та третя стовпці зберігають фіксовану ширину (200px), а перший стовпець - від 100px до 200px, на основі вільного простору.

По-друге, можна визначити ширину більше одного стовпця сітки використання minmax (). Значення min та max є статичними, тому за замовчуванням сітка не відповідає. Однак самі колони є гнучкою, але лише між 100px і 200px. Вони ростуть і стискаються одночасно як ми змінюємо розмір вікна перегляду.

 grid-template-колонки: minmax (100px, 200px) minmax (100px, 200px) minmax (100px, 200px); 

Зверніть увагу, що ми також можемо використовувати повторити () функції разом з minmax (). Отже, попередній фрагмент коду також може бути записаний так:

 grid-шаблон-колонки: повтор (3, minmax (100px, 200px)); 

Значення динамічної довжини

Крім статичних значень, minmax () функція також приймає відсоткових одиниць і нову фракцію (fr) одиницю як аргументи. Використовуючи їх, ми можемо домогтися створення індивідуальних сіток, які є обома чуйний і змінювати свої розміри відповідно до наявного місця.

Наведений нижче код призводить до сітки, в якій ширина першого стовпця коливається від 50% до 80% другий і третій рівномірно розподіляйте залишився простір.

 grid-шаблон-колонки: minmax (50%, 80%) 1fr 1fr; 

Коли ми використовуємо динамічні значення з minmax () функцію, важливо встановити a правило, що має сенс. Дозвольте мені показати вам приклад, де сітка розвалюється:

 grid-шаблон-колонки: minmax (1fr, 2fr) 1fr 1fr; 

Це правило не має ніякого сенсу, оскільки браузер є не може вирішити яке значення присвоїти minmax () функції. Мінімальне значення призведе до a 1fr 1fr 1fr Ширина стовпців, а максимальна - 2fr 1fr 1fr. Але, обидва можливі навіть на дуже маленькому екрані. Є нічого, до чого браузер не може відноситися.

Ось результат:

Поєднуйте статичні та динамічні значення

Це також можливо поєднувати статичні та динамічні значення. Наприклад, у коді Codepen вище, я використовував minmax (100px, 200px) 1fr 1fr; Правило, яке призводить до отримання сітки, де знаходиться перший стовпець варіюється від 100px до 200px а залишився простір рівномірно розподіляється між двома іншими.

 grid-шаблон-колонки: minmax (100px, 200px) 1fr 1fr; 

Цікаво помітити, що при збільшенні вікна перегляду перший стовпець зростає з 100px до 200px. Два інших, керовані блоком fr, починають рости тільки після того, як перша досягла своєї максимальної ширини. Це логічно, оскільки метою фракційного блоку є розділити наявний (залишився) простір.

The min-content, max-content, і авто ключові слова

Є третій вид цінності ми можемо призначити minmax () функції. The min-content, max-content, і авто ключові слова стосуються розмірів доріжки сітки до вміст, який він містить.

max-content

The max-content ключове слово направляє веб-переглядач, який має бути стовпець сітки настільки широкий, як найширший елемент, який він містить.

На демо нижче, я розмістив a 400px-широке зображення всередині першої доріжки сітки і використовували наступне правило CSS (ви можете знайти демо Codepen з повним зміненим кодом у кінці статті):

 .контейнер grid-template-column: max-content 1fr 1fr; / ** * Те ж саме з позначенням minmax (): * grid-template-column: minmax (max-content, max-content) 1fr 1fr; * / 

Я не використовував minmax () нотації, але в коментарі вище коду ви можете побачити, як буде виглядати той самий код (хоча це зайве).

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

min-content

The min-content ключове слово направляє веб-переглядач, щоб колонка сітки мала ширину вузький елемент, який він містить, таким чином не призводить до переповнення.

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

 .контейнер grid-template-column: мін-зміст 1fr 1fr; / ** * Те ж саме з позначенням minmax (): * grid-template-column: minmax (min-content, min-content) 1fr 1fr; * / 

Я залишив зелений фон під зображенням, так що ви можете побачити повний розмір першої комірки сітки.

Як ви можете бачити, перша колонка зберігає найменшу ширину може бути досягнуто без переповнення. У цьому прикладі це буде визначатися мінімальною шириною 4-ої та 7-ої комірок сітки, яка випливає з прокладка і розмір шрифту властивості, як зображення в першій комірці може бути зменшена до нуля без переповнення.

Якщо в комірці сітки міститься текстовий рядок, min-content міг би бути дорівнює ширині найдовшого слова, це найменший елемент, який не може бути скорочений без переповнення. Ось чудова стаття BitsOfCode, де ви можете побачити, як це зробити min-content і max-content ведуть себе, коли клітинка сітки містить текстовий рядок.

Використання min-content і max-content разом

Якщо ми використання min-content і max-content разом всередині minmax () ми отримуємо стовпець сітки, який:

1. відповідає
2. не має переповнення
3. не зростає ширше, ніж його найширший елемент

 .контейнер grid-шаблон-колонки: minmax (min-content, max-content) 1fr 1fr;  

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

авто

Нарешті, ми можемо також використовувати авто ключове слово як аргумент minmax () функції.

Коли авто є використовується як максимум, його значення ідентичне max-content.

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

У нашому попередньому прикладі, min-content дорівнює авто, оскільки мінімальна ширина першого стовпця сітки завжди менше його мінімальної висоти. Отже, відповідне правило CSS:

 .контейнер grid-шаблон-колонки: minmax (min-content, max-content) 1fr 1fr;  

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

 .контейнер grid-template-column: minmax (auto, auto) 1fr 1fr;  

The авто ключове слово також може бути використовуються разом з іншими статичними і динамічними блоками (пікселі, одиниця fr, відсотки тощо) всередині minmax () функції minmax (авто, 300px) буде правильним правилом.

Ви можете перевірити, як min-content, max-content, і авто ключові слова працюють з minmax () функція в наступній копії коду: