Посібник з CSS Grid Layout Fr Unit

The CSS Grid Layout Module поставлено з новий блок CSS називається fr одиниці. Настільки ж просто, як може бути, fr є абревіатура слова “фракція”. Новий блок дозволяє швидко нарізати сітку в пропорційні стовпці або рядки. Як результат, створення повністю реагують і гнучкі сітки стає майже вітерцем.

Оскільки фракційний блок був введений разом з модулем Grid Layout, ви можете використовувати його в будь-якому браузері підтримує сітку CSS. Якщо ви також хочете підтримати старіші браузери, то тут велика Сітка поліефіру CSS що дозволяє використовувати не тільки fr а також інші функції сітки.

Базове використання

По-перше, давайте подивимося на a основна сітка що використовує фракційну одиницю. Розташування нижче розділяє простір на три стовпці рівної ширини і два рядки рівної висоти.

Приналежний HTML складається з шість дивів з позначкою .коробка клас, всередині a .обгортка div.

 
 
1.
 
2.
 
3.
 
4.
 
5.
 
6.
 
 

Щоб використовувати модуль Grid Layout, потрібно додати дисплей: сітка; Властивість CSS для обгортки. The grid-template-колонки властивість використовує fr одиницю як значення; співвідношення трьох стовпців дорівнює 1: 1: 1.

Для рядків сітки (grid-template-рядки власності), я не використовував fr одиниці, так як це має сенс тільки, якщо обгортка має фіксовану висоту. В іншому випадку він може мати дивні результати на деяких пристроях, однак, навіть тоді fr одиниці не підтримує співвідношення (і це величезне значення).

The сітка-розрив власності додає сітку 10px між ящиками. Якщо ви не хочете, щоб будь-який розрив просто видалити це властивість.

 .обгортка відображення: сітка; grid-template-column: 1fr 1fr 1fr; grid-template-рядки: 200px 200px; розрив сітки: 10px;  .box колір: білий; text-align: center; розмір шрифту: 30px; заповнення: 25px;  

Зверніть увагу, що CSS вище не містить деяких основних стилів, таких як кольори фону. Ти можеш знайдіть повний код у демонстраційній версії в кінці статті.

Коефіцієнт зміни

Звичайно, ви не можете використовувати тільки 1: 1: 1, але будь-яке співвідношення ви хочете. Нижче я використав Фракції 1: 2: 1 що також розділяє простір на три колонки але середня колонка буде вдвічі ширше як і два інших.

Я також збільшив значення сітка-розрив щоб побачити, як він змінює макет. В основному, браузер вираховує розрив сітки з ширини вікна перегляду (у цьому прикладі прогалини сітки додають до 80px), і нарізає решту за даними фракціями.

 .обгортка відображення: сітка; grid-template-column: 1fr 2fr 1fr; grid-template-рядки: 200px 200px; розрив сітки: 40px;  

Комбінат fr з іншими одиницями CSS

Ти можеш комбінувати fr блок з будь-які інші одиниці CSS так само. Наприклад, у наведеному нижче прикладі я використав 60% 1fr 2fr співвідношення для моєї сітки.

Отже, як це працює? The браузер призначає 60% ширини вікна перегляду до першого стовпця. Потім він розділяє решту простору на 1: 2 дроби.

Те ж саме можна було б записати так само 60% 13,33333% 26,66667%. Але, чесно кажучи, чому хтось хоче використовувати цей формат? Величезною перевагою фракції є те, що вона покращує читаність коду. Більше того, це абсолютно точно, у відсотковому форматі до 99,9999%.

 .обгортка відображення: сітка; grid-template-column: 60% 1fr 2fr; grid-template-рядки: 200px 200px; розрив сітки: 10px;  

Крім відсотків, Ви також можете використовувати інші одиниці CSS разом з блоком дробів, наприклад pt, px, em, і rem.

Додайте пробіли з fr

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

Як бачите, ця сітка має порожній стовпець в той час як він все ще зберігає всі шість коробок. Для цього макета нам потрібно прорізати простір на чотири стовпці замість трьох. Отже, ми використовуємо 1fr 1fr 1fr 1fr значення для grid-template-колонки власності.

Додаємо порожню колонку всередину сітки-шаблонні області власності, використовуючи точкове позначення. В основному, це властивість дозволяє вам посилаються на назви областей сітки. І, ви можете назвати області сітки з площа сітки властивість, яку потрібно використовувати окремо для кожної області.

 .обгортка відображення: сітка; grid-шаблон-колонки: 1fr 1fr 1fr 1fr; grid-template-рядки: 200px 200px; розрив сітки: 10px; grid-template-області: "box-1 box-2. box-3" "box-4 box-5. box-6";  .box-1 сітка-область: поле-1;  .box-2 сітка-область: поле-2;  .box-3 сітка-область: поле-3;  .box-4 сітка-область: поле-4;  .box-5 площа-сітка: поле-5; .box-6 площа-сітка: box-6;  

Області пробілів не обов'язково створювати колонку, Вони може бути де завгодно в сітці.

The повторити () функції

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

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

The повтор (3, 1фр) синтаксис результати в тій же макеті як 1fr 1fr 1fr. Нижній макет такий же, як і перший приклад.

Якщо ви збільшення множника всередині повторити () Функція буде мати більше стовпців. Наприклад, повтор (6, 1фр) призводить до шість рівних стовпців. У цьому випадку всі наші коробки буде в одному рядку, це означає, що для використання достатньо лише одного значення (200px) grid-template-рядки власності.

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

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

 .обгортка відображення: сітка; сітка-шаблон-колонка: повтор (3, 1fr) повтору (3, 2fr); grid-шаблон-рядки: 200px; розрив сітки: 10px;  

Ви також можете комбінувати повторити () з іншими одиницями CSS. Наприклад, можна використовувати 200px repeat (4, 1fr) 200px як дійсний код.

Якщо вас цікавить як це зробити створювати складні макети з модулем Grid CSS повторити () функція і fr Рейчел Ендрю має цікавий пост в блозі про те, як ви можете це зробити.

Демо для експериментів

Нарешті, ось демо, яку я обіцяв. Він використовує той же код, що і перший приклад цієї статті. Розташуйте його, і подивіться, що ви можете досягти fr одиниці.