Від автора: ми вирішили розвіяти міфи про Flexbox і Grids, щоб показати міць цих технологій при їх спільному використанні. Реалізація Grids у всіх браузерах зайняла більше шести років. Протягом усього життя специфікації навколо неї велася полеміка. У 2011 зустріли її зі скептицизмом, так як команда Microsoft Developer Team оголосила про префиксной підтримки для IE10. Недолік інформації про пропозиції W3C змусив деяких розробників сумніватися в необхідності іншої системи макетування, так як у нас вже були обтікання, таблиці і Flexbox. Тим не менш, завдяки зусиллям розробників і членів CSS Working Group (Rachel Andrew та Jen Simmons) популярність Grids почала зростати, а значить, з’явилися behind-flag і нічні збірки.
На березень 2017 Grids впроваджений у всі основні браузери, але досі витає парочка чуток і міфів навколо специфікації. Мета цієї статті розвіяти ці міфи і перейти на зручну розробку сайтів за допомогою цієї нової техніки, яку ми використовуємо на Aerolab (Frids-layout).
Вирази типу «Grids прийшов, щоб убити Flexbox» або що Grids готовий до продакшн і необхідно використовувати «Flexbox як фолбек для Grids» неправильні. Сподіваюся, ми не будемо дотримуватися таких порад.
Так що читайте і давайте розберемо ці міфи, щоб зрозуміти справжню силу двох технологій, які працюють разом, а не один проти одного. Також ми розберемо реальні приклади використання з продакшну, а в кінці статті вас чекають HTML і CSS шаблони.
Зруйновані міфи
Серія чуток про «Grids і Flexbox», які почали поширюватися в 2010. Про двох я говорив раніше, їх потрібно розвінчати.
«1. Grids прийшов, щоб убити Flexbox. Немає. Сьогодні помре тільки один, і це будеш ти, табличній! Люди схильні зіштовхувати технології (і людей) один з одним. І навіть якщо порівняння і змагання часто веде до розвитку індустрії, це не той випадок.»
Flexbox і Grids розроблялися приблизно в одному час, але для різних цілей, про що ми поговоримо далі в статті. Якщо у вас ще залишилася дещиця сумнівів, то у Grids і Flexbox одні і ті ж редактори в чернетці W3C. Вони працюють разом, вони не змагаються.
«1. Flexbox – це фолбек для Grids. Не женися за кваффлом, якщо бачиш снитч. Це приводить нас до попередньої думки – цілі Flexbox і Grids відрізняються. Тому не варто строго дотримуватися думки, що попередню технологію необхідно використовувати як фолбек, особливо якщо її підтримка в IE така ж погана, як у Grids.»
Робота з Frids-layout
Почнемо з розбору різних юз кейсів і способів, коли вони доповнюють один одного:
Одномірне макетування. Якщо контент необхідно розташувати в одному вимірі, будь-то горизонталь (вісь Х) або вертикаль (вісь У), вам необхідно, щоб макет відповідав вмісту елементів. Тоді вам потрібен Flexbox. Він відмінно підходить для компонентів (але не обмежується ними).
Двовимірне макетування. Якщо контент необхідно розташувати у двох осях, тобто у вигляді сітки…! Це властивість ідеально підходить для макетів сторінок і складних, нелінійних компонентів.
У кожному правилі є, звичайно, винятки, але вам буде набагато зручніше, якщо ви зарезервуєте Grids для основних і візуально складних макетів, а Flexbox для лінійних макетів.
У 2017 розробники краще знають Flexbox ніж Grids. Якщо ви не бачили Grids в продуктиве, настійно рекомендую відвідати сайт Full Stack Fest Barcelona. Їх розділ speakers вражає.
Незважаючи на різні цілі, у них є спільні внутрішні властивості, так як, зрештою, вони обидва є інструментами макетування. Загальні властивості входять у нову специфікацію CSS Box Alignment Specification – розробники зі всього світу давно просили цього. Пам’ятаєте той пекло з вертикальним вирівнюванням? Хороші часи.
Специфікація Box Alignment
Нова специфікація включає розподіл контенту і самовирівнюються функції, які можна застосовувати до блочних елементів в Flexbox або Grids.
Елементи вирівнювання всередині флекс контейнера
Розподіл елементів всередині флекс контейнера
Вирівнювання елементів всередині контейнера Grids
Зупинимося ненадовго і розберемо попереднє демо:
Насамперед, ми створюємо трехколоночную сітку з допомогою repeat(). Кожна колонка шириною 1fr. Потім за допомогою властивостей align-items і justify-items ми вирівнюємо комірки по осях Х і У, а з допомогою align-self і justify-self вирівнюємо одну клітинку або розтягуємо її на всю доступну висоту.
Це загальні властивості з Flexbox, ви можете їх знати. Основна різниця в тому, що ми не ставимо “flex-start” і “flex-end”, а тільки “start” і “end”.
Розподіл елементів всередині контейнера Grids
Є інший набір властивостей, які будуть ділити незабаром Flexbox і Grids — grid-gap. Цю функцію сильно просили розробники, з її допомогою можна буде встановлювати відстань між флекс елементами. Властивості grid-row-gap і grid-column-gap перейменують в row-gap і column-gap. Але без паніки! Ваш старий код все ще буде працювати.
Flexbox і Grids разом
Після створення сітки в осередку необхідно додати контенту. Будь то зображення, текст або і те і інше, краще всього розташувати їх за допомогою Flexbox.
Прийміть адаптивність
На відміну від обтеканий та інших застарілих систем макетування, Flexbox і Grids створені в еру безлічі різних пристроїв. Тому в їх основу закладено адаптивність і тягучість, чого не вистачає в старих методах. Ви побачите, що в цих двох системах є безліч способів адаптувати контент під екран користувача.
Fluid Flexbox Layout
Flexbox адаптивний за замовчуванням. Після застосування до елемента display: flex ви відразу отримуєте рідкий макет. В залежності від кількості контенту необхідно застосувати мінімальну ширину елементів. Для цього можна використовувати властивості flex-basis і flex-wrap.
Fluid Grid Layout
Щоб точно знати, що ваш Grids макету буде завжди адаптивним, і що у його компонентів буде мінімальна ширина, ми можемо використовувати функцію minmax та одиниці fr. Це одиниці виміру для створення гнучких сіток. Один fr дорівнює частці доступного простору в Grids контейнері. Так як вони враховують простір між осередками, то нам зовсім не потрібно нічого обчислювати.
Якщо ви хотіли змінити макет на маленьких екранах, ви завжди можете зробити це за допомогою медіа запитів.
Готовий продакшн
Grids і Flexbox готові до продуктиву, ці технології підтримуються у всіх основних браузерах. У Microsoft Edge 15 є підтримка Grids зі старим синтаксисом. Edge 16 пофиксили це з виходом останньої стабільної версії Windows 10 Fall Creators Update 17 жовтня.
Якщо хочете повну підтримку браузерів, настійно рекомендую використовувати функціональні запити для забезпечення альтернативних макетів для браузерів без підтримки Grids або які підтримують старий синтаксис.
.grid-parent{
/* Fallback layout */
}
@supports (display: grid) {
.grid-parent{
/* Use grids */
}
}
Останнє, але не менш важливе – слідкуйте за багами для Grids тут і для Flexbox тут.
MagicCube
MagicCube звернулися в Aerolab за допомогою у створенні нової ідентичності та розробці нового сайту.
Після завершення UX і UI для нових сторінок ми відразу зрозуміли, що цей дизайн круто було б зробити на Grids. З-за складного макета ми вирішили застосувати цю технологію разом з функціональними запитами для браузерів без підтримки і Flexbox для розміщення внутрішніх елементів. Grids дає швидку настройку і гнучкість, з його допомогою можна швидко вносити необхідні зміни!
Нам була необхідна впевненість, що наш сайт сподобається всім. Тому для браузерів Opera Browser, Samsung Internet і UC Browser ми застосували метод витонченої деградації за допомогою CSS правила supports для переходу до більш простому макету.
Результатом стала повністю адаптивна і доступна сторінка новин, яка використовувала складних макет, коли користувач заходив з нормального браузера, і відмовлялася в іншому випадку до простого дизайну. Grids дозволить нам змінювати шаблон дизайну швидко та ефективно.
Використання Grids разом з Flexbox
Не звертайте увагу на маґлів – почніть користуватися Grids вже сьогодні. Необгрунтовані чутки про Flexbox Vs. Grids не повинні зупиняти вас від використання нових дивовижних макетів на сайті. Простий кастомізації і підтримки більш ніж достатньо для знайомства з цією технікою.
Не знаєте звідки почати, внизу вас чекають шаблони!
Ресурси
Спочатку вивчення Grids може викликати труднощі. На щастя, в мережі повно ресурсів:
Paper
Старий вірний друг. Краще всього почати мислити в стилі сітки, це намалювати її на папері. Там ви відразу побачите, що таке колонки, рядки і пропуски. Малювання на папері не займе багато часу, а ви краще зрозумієте сітку.
Інструменти розробника
У Firefox Developer Tools чудова вбудована інтеграція Grids, в якій ви зможете перемикати візуалізацію стовпців, рядків і пропусків.
Chrome випустив схожий інструмент.
