Вступ до одиниці fr

Для створення макетів, які плавно адаптуються до будь-якого розміру екрана, одиниця fr є потужним інструментом. Одиниця fr (фракція) у CSS Grid дозволяє виділяти частину доступного простору для треків сітки. На відміну від фіксованих одиниць, таких як px або %, одиниця fr розподіляє простір динамічно, забезпечуючи гнучкість і адаптивність вашої сітки.

Якщо ви встановите стовпці сітки як 1fr 2fr, перший стовпець отримає одну частину доступного простору, а другий — дві частини, незалежно від загальної ширини сітки. Це робить одиницю fr незамінною для створення макетів, які масштабуються елегантно без ручних налаштувань.

Як працює minmax() і коли його використовувати

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

• Використовуйте minmax(min, max) для встановлення нижньої та верхньої межі розміру стовпців або рядків;
• Забезпечуйте читабельність контенту, встановлюючи розумне мінімальне значення;
• Дозволяйте трекам розширюватися та заповнювати доступний простір, поєднуючи minmax() з одиницями fr;
• Підтримуйте гнучкі, зручні для користувача макети на всіх розмірах екранів.

Наприклад, minmax(150px, 1fr) гарантує, що стовпець ніколи не стане меншим за 150px, але може розширюватися настільки, наскільки дозволяє доступний простір. Застосовуйте minmax(), коли потрібно, щоб зображення, картки або блоки контенту залишалися читабельними та візуально збалансованими, водночас використовуючи динамічний розподіл простору.