Від автора: ця тиждень ознаменувала вихід CSS Grid в останніх версіях Firefox і Chrome без додаткового прапора, що стало справжнім святом для front-end розробника. Тепер можна гратися з Grid в двох останніх версіях цих браузерів. Але що такого в цій CSS Grid, чи потрібна вона нам?
CSS Grid – перша справжня система макетування для вебу. Система спроектована для організації контенту в стовпці та рядки. У розробників буквально з’явився режим Бога з контролю за екраном. Це означає, що можна викинути десятиліття хаків і обхідних рішень по розміщенню елементів на веб-сторінці. Складні макети і красиві сторінки тепер не просто реальні, тепер їх легко створювати і обслуговувати.
З CSS Grid веб стане набагато більш привабливим місцем.
Зрозуміло, а як працює Grid? В мережі повно складних уроків з жахливим кількістю інформації. Я вважаю, що почати потрібно з самих основ. Сьогодні ми створимо досить простий приклад з буквами з алфавіту.
Для початку додамо розмітку:
Першим ділом ми додамо правильні стилі буквах (font-size і color). Далі центрируем літери всередині div ів з допомогою flexbox властивостей align-items і justify-content. І так, CSS Grid не замінює flexbox-властивості, а доповнює їх. Багато з цих властивостей можна використовувати в парі з CSS Grid. А зараз повернемося до демо:
У прикладі вище два простих div а, розташованих один під іншим (за замовчуванням display: block). Необхідно зробити так, щоб батьківський елемент використовував макет Grid:
.wrapper {
display: grid;
}
Що дає нам:
Видно, що нічого не видно. І все правильно! На відміну від display: inline-block; display: inline; зі значенням grid не все так зрозуміло. Щоб сітка хоч якось себе показала, що їй потрібно згодувати кілька колонок і рядків. У цьому прикладі ми просто вирівняємо букви поруч у дві колонки:
.wrapper {
display: grid;
grid-template-columns: 1fr 1fr;
grid-column-gap: 1px;
background-color: black;
}
Давайте розберемо код. Спершу ми створюємо дві колонки у сітці за допомогою grid-template-columns. Значення 1fr може здатися неправильним, якщо ви раніше не бачили. Але все вірно, це значення каже, що колонки будуть займати всю свою ширину в сітці. У нашому прикладі це означає, що буде дві колонки однакової ширини.
В результаті вийде щось схоже:
Ура, працює! Бачите цей пробіл між колонок? Це видно фон wrapper, проскакивающий крізь letter, так як ми задали grid-column-gap в 1px. Зазвичай доводиться задавати більше значення column-gap, особливо якщо ми вирівнюємо блоки поруч. Але в нашому прикладі вистачить і 1 пікселя.
Що буде, якщо ми додамо дві нові літери розмітку? Що зміниться в макеті?
Технічно в сітці нічого не зміниться. Ми вже поставили дві колонки, і ці дві букви ляжуть рівно під іншими і будуть точно 1fr завширшки:
Тепер що дивно, чому між літерами А і С, а також В і D немає пробілу в 1px? Властивість grid-column-gap використовується тільки для колонок, і так ми створили новий рядок в сітці. Щоб побачити зміни, треба скористатися властивістю grid-row-gap:
.wrapper {
grid-column-gap: 1px;
grid-row-gap: 1px;
/* інші стилі */
/* також можна було використовувати скорочення `grid-gap` */
}
Ось так це виглядає:
Ось ми і створили нашу першу сітку. Ми створили рядка та колонки, для цього нам потрібно лише змінити розмітку. Давайте розберемо колонки детальніше. Що буде, якщо змінити значення властивості grid-template-columns? Ось так:
.wrapper {
grid-template-columns: 1fr 1fr 1fr;
}
Ми створили ще одну колонку, все ясно! Зверніть увагу, що ми тепер вільно бачимо фоновий колір контейнера, так як не вистачає дочірніх елементів:
Якщо змінити значення fr в цьому властивості, то у нас вийде так звана асиметрична сітка. Наприклад, давайте зробимо так, щоб перша колонка займала в три рази більше місця, ніж інші дві:
.wrapper {
grid-template-columns: 3fr 1fr 1fr;
}
Колонка з літерами А і D стала більше за інших, як і очікувалося:
Хіба це не сильно? Більше не потрібно підбирати негативні магдіп’и і ідеальні значення у відсотках, щоб правильно вирівняти колонки. Можна створювати супер складні сітки, не думаючи про обчисленнях, які нам довелося б робити раніше. Тепер потрібно всього лише додати нове значення властивості grid-template-columns і все, магічним чином в сітці з’являється нова колонка!
Ви можете задатися питанням щодо адаптивних сіток. Все так само просто, потрібно лише міняти цю властивість всередині медіа запиту. Наприклад, нам потрібно за замовчуванням мати 2 колонки. На рівні 500px колонок повинно бути 3, а на великих екранах весь контент переміщається в 4 колонки. Для цього нам треба було б написати наступний код:
.wrapper {
display: grid;
grid-template-columns: 1fr 1fr;
@media screen and (min-width: 500px) {
grid-template-columns: 1fr 1fr 1fr;
}
@media screen and (min-width: 800px) {
grid-template-columns: 1fr 1fr 1fr 1fr;
}
}
Відкрийте демо в новій вкладці і змініть розмір вьюпорта, щоб перевірити адаптивність!
Властивість grid-template-columns набагато складніше, ніж те, що я тут показав, але це хороша відправна точка. Далі потрібно вивчити властивість специфікації CSS Grid, яке реально змінює що-то: grid-template-rows.
Давайте дивитися. Давайте спробуємо здогадатися, що робить цю властивість. Подивіться на код нижче і згадайте все, що знаєте про Grid.
.wrapper {
display: grid;
grid-template-columns: 3fr 1fr 1fr;
grid-template-rows: 1fr 3fr;
}
Замість встановлення ширини колонок і їх взаємозв’язків тепер ми задаємо висоту рядків і їх відносини. Так що якщо взяти попередній приклад і встановити останнє значення в 3fr, то другий рядок завжди буде в три рази більше по висоті, ніж перша:
Начебто нічого складного, але раніше ми так робити не могли. Раніше доводилося писати грубі хакі. Наприклад, встановлювати min-height на певному елементі або змінювати клас. Але у нас не було можливості встановлювати зв’язки між рядками. Це і робить CSS Grid потужним інструментом.
З такими невеликими знаннями і парочкою нових властивостей ми можемо створювати настільки складні макети, що асиметричні і адаптивні сітки будуть становити лише невелику їх частину. І це лише верхівка айсберга специфікації CSS Grid, там дуже багато нового. Jen Simmons найкраще описала новий інструмент у своїй статті:
«CSS Grid потрібно вивчати до тих пір, поки ми не зрозуміємо, що з його допомогою треба робити, що з його допомогою можна зробити примусово, а також що можна зробити. Багатьом дизайнерам можна навіть не вивчати CSS, але вам потрібно добре знати CSS, щоб розуміти художню середу.»
Звичайно, код зверху перший час буде здаватися дивним. Однак тепер нам не потрібні гігантські CSS фреймворки і всі ці хакі для макетів, які зовсім не актуальні. Що мене найбільше радує в Grid, це те, що він змушує нас дивитися на простір у браузері по-іншому.
Нам потрібно вивчити не тільки купу нових властивостей, але й переосмислити все, що дізналися в минулому. CSS Grid – це не просто специфікація, а ціла філософія.
Давайте вивчати її разом!
Підтримка в браузерах
Дані про підтримку взято з сайту Caniuse, де також сказано, що функція перебуває в статусі W3C Candidate Recommendation.
