Від автора: я насилу стримував хвилювання перед виходом CSS Grid: над специфікацією досить довго працювали, і ось вона тут! Grid дуже швидко набрав підтримку в браузерах, і новини про сітці підірвали інтернет (плюс Edge). У Firefox з’явився досить непоганий інструмент редагування сітки в панелі розробника. Думаю, в Chrome скоро теж з’явиться такий режим.
Поточна підтримка:
Як-то давно я вже чув про Grid, але не міг оцінити можливості інструменту, поки не спробував сам. А далі було так: «Боже мій, це дуже сильно нам допоможе! CSS Grid – одна з найбільш продуманих і потужних специфікацій CSS, які я бачив за довгий час».
Зараз в мережі повно крутих уроків і ресурсів (посилання в кінці статті), тому цей пост буде не у формі керівництва. Замість цього ми поговоримо про те, чому ж все-таки CSS Grid так гарний! Сподіваюся, цей пост змусить вас спробувати сітки!
Іменовані області
В Grid реалізовано декілька способів розкладки шаблонів, в тому числі і нові одиниці вимірювання fr або дробу (дробова частина простору). Серед шаблонних властивостей моє улюблене — grid-template-areas! З його допомогою можна створювати іменовані області, освічені з допомогою grid-template-columns та grid-template-rows. Можна буквально розписати карту дизайну!
Розберемо приклад:
Код сітки:
body {
/* одна колонка – половина ширини вьюпорта */
grid-template-columns: 50vw;
/* хедер + секції = висота
Розміри футера автоматичні */
grid-template-rows: 10vh 40vh 40vh auto;
/* grid template areas! */
grid-template-areas:
“header header”
“top-left top-right”
“bottom-left bottom-right”
“footer footer”;
}
що переводиться в:
Так, я правильно зрозумів!?
Код вище можна зробити ще коротше!:
body {
grid-template:
“header header” 10vh
“top-left top-right” 40vh
“bottom-left bottom-right” 40vh
“footer footer” / 50vw 50vw;
}
Можна використовувати смайлики для візуалізації відступів у сітці:
На flexbox можна написати фолбеки, але це складно, а також це ще більше рядків коду. Зауважив, що писати макети відразу на CSS Grid – це хороший спосіб зрозуміти принцип побудови макета, а це в майбутньому спрощує написання фолбеков для Flexbox, як у першому прикладі.
Вставляйте роздільники так, як вам треба
В CSS Grid є властивість grid-gap, за допомогою якого задається роздільник між елементами. В сітках адаптивних дизайнів ми дуже довго боролися з цією проблемою.
Раніше для створення відступів у flexbox або системі сіток, побудованої на властивості float, ми любили використовувати магдіп’и. Такий підхід призводив до дивних ситуацій, коли потрібно було видаляти непотрібні відступи (наприклад, margin навколо контейнера сітки).
Раніше ці проблеми ми вирішували кількома способами:
Спершу ми вдавалися до JS, в якому рахували кількість елементів, після чого застосовували до них спеціальні класи для видалення магдіп’ов на основі положення елементів.
Потім ми використовували адаптивні Grid-фреймворки, які здебільшого працювали з відсотками. Нам доводилося вказувати кількість колонок і їх ширину.
Потім ми намагалися видаляти зовнішні магдіп’и з допомогою властивості nth-children, з-за чого код міг зламатися при будь-якій зміні розміру екрана.
Потім роздільники в сітці можна було задавати через функцію calc (функція вміє змішувати одиниці виміру), код однак все одно виходив досить складним. Потрібно було знати кількість елементів у рядку або ж використовувати хакі з негативним позиціонуванням і властивість overflow: hidden на зовнішніх роздільниках.
Я вважаю, що CSS Grid вирішив всі ці проблеми. Інструмент помістив роздільники між елементів. Саме там, де вони і повинні бути одним рядком чіткого і короткого CSS.
Minmax
З Grid з’явилася CSS-функція minmax(), за допомогою якої можна встановлювати мінімальну і максимальну ширину (висоту) контейнера. Якщо ви схожі на мене, то відразу подумали: «Еммм… ЩО?! ТАК. НАРЕШТІ-ТО». Але ви, напевно, не так сильно захоплені стилями, як я.
Можна використовувати:
будь-які фіксовані одиниці (px, em, vw і т. д.);
Grid-одиниці (1fr);
Відсотки (40%);
min-content;
max-content;
auto.
Потужний код в парі рядків. Елементи в сітках досить гнучкі і можуть збільшуватися і зменшуватися до певних розмірів. Це означає, що від медіа запитів можна позбутися. Ще краще, це підводить нас ближче до елементним запитам, де гнучкість елементів зав’язана на розмірі особистого контейнера, а не вікна браузера.
Приклад:
У цьому демо немає фолбека. Ось так це має виглядати на той випадок, якщо ви сидите в старому браузері:
Minmax + Auto flow дозволяють створювати по-справжньому круті макети. У прикладі зверху велика область контенту була встановлена в auto flow, а на сайдбар задано minmax. Вся сітка з хедером, контентом біля сайдбара, але відокремленого від футера виглядає так:
body {
display: grid;
grid-gap: $gutter;
grid-template-columns: minmax(150px, 400px) auto;
grid-template-rows: 10vh $img-sec-h $img-sec-h auto;
grid-template-areas:
“side header header”
“side top-left top-right”
“side bottom-left bottom-right”
“footer footer footer”;
}
Я не встановлював ширину для елементів і не використовував calc! І я казав, що CSS Grid працює одночасно горизонтально і вертикально для рядків і стовпців!?
Висновок
Специфікація CSS Grid дає розробникам і дизайнерам безліч потужних властивостей, а також сильно спростить і додасть семантики макети. Сітка просто працює. Я навіть розсердився, що все так просто.
Варто зауважити, що CSS Grid не замінює Flexbox. Вони працюють разом. Flexbox – це лінійне макетное властивість, і воно працює всередині системи сіток. Однак це неідеальне рішення для макетів сторінок з горизонтальними і вертикальними областями. Інструменти працюють разом, щоб зробити з макета цукерку.
