Flexbox і Grids — ваші найкращі друзі в макетуванні

17

Від автора: ми вирішили розвіяти міфи про 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 вражає.

Flexbox і Grids — ваші найкращі друзі в макетуванні

Незважаючи на різні цілі, у них є спільні внутрішні властивості, так як, зрештою, вони обидва є інструментами макетування. Загальні властивості входять у нову специфікацію CSS Box Alignment Specification – розробники зі всього світу давно просили цього. Пам’ятаєте той пекло з вертикальним вирівнюванням? Хороші часи.

Специфікація Box Alignment

Нова специфікація включає розподіл контенту і самовирівнюються функції, які можна застосовувати до блочних елементів в Flexbox або Grids.

Елементи вирівнювання всередині флекс контейнера

Flexbox і Grids — ваші найкращі друзі в макетуванні

Розподіл елементів всередині флекс контейнера

Flexbox і Grids — ваші найкращі друзі в макетуванні

Вирівнювання елементів всередині контейнера Grids

Flexbox і Grids — ваші найкращі друзі в макетуванні

Зупинимося ненадовго і розберемо попереднє демо:

Насамперед, ми створюємо трехколоночную сітку з допомогою repeat(). Кожна колонка шириною 1fr. Потім за допомогою властивостей align-items і justify-items ми вирівнюємо комірки по осях Х і У, а з допомогою align-self і justify-self вирівнюємо одну клітинку або розтягуємо її на всю доступну висоту.

Це загальні властивості з Flexbox, ви можете їх знати. Основна різниця в тому, що ми не ставимо «flex-start» і «flex-end», а тільки «start» і «end».

Розподіл елементів всередині контейнера Grids

Flexbox і Grids — ваші найкращі друзі в макетуванні

Є інший набір властивостей, які будуть ділити незабаром Flexbox і Grids — grid-gap. Цю функцію сильно просили розробники, з її допомогою можна буде встановлювати відстань між флекс елементами. Властивості grid-row-gap і grid-column-gap перейменують в row-gap і column-gap. Але без паніки! Ваш старий код все ще буде працювати.

Flexbox і Grids — ваші найкращі друзі в макетуванні

Flexbox і Grids разом

Після створення сітки в осередку необхідно додати контенту. Будь то зображення, текст або і те і інше, краще всього розташувати їх за допомогою Flexbox.

Flexbox і Grids — ваші найкращі друзі в макетуванні

Прийміть адаптивність

На відміну від обтеканий та інших застарілих систем макетування, Flexbox і Grids створені в еру безлічі різних пристроїв. Тому в їх основу закладено адаптивність і тягучість, чого не вистачає в старих методах. Ви побачите, що в цих двох системах є безліч способів адаптувати контент під екран користувача.

Fluid Flexbox Layout

Flexbox адаптивний за замовчуванням. Після застосування до елемента display: flex ви відразу отримуєте рідкий макет. В залежності від кількості контенту необхідно застосувати мінімальну ширину елементів. Для цього можна використовувати властивості flex-basis і flex-wrap.

Flexbox і Grids — ваші найкращі друзі в макетуванні

Fluid Grid Layout

Щоб точно знати, що ваш Grids макету буде завжди адаптивним, і що у його компонентів буде мінімальна ширина, ми можемо використовувати функцію minmax та одиниці fr. Це одиниці виміру для створення гнучких сіток. Один fr дорівнює частці доступного простору в Grids контейнері. Так як вони враховують простір між осередками, то нам зовсім не потрібно нічого обчислювати.

Flexbox і 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 дає швидку настройку і гнучкість, з його допомогою можна швидко вносити необхідні зміни!

Flexbox і Grids — ваші найкращі друзі в макетуванні

Нам була необхідна впевненість, що наш сайт сподобається всім. Тому для браузерів Opera Browser, Samsung Internet і UC Browser ми застосували метод витонченої деградації за допомогою CSS правила supports для переходу до більш простому макету.

Результатом стала повністю адаптивна і доступна сторінка новин, яка використовувала складних макет, коли користувач заходив з нормального браузера, і відмовлялася в іншому випадку до простого дизайну. Grids дозволить нам змінювати шаблон дизайну швидко та ефективно.

Використання Grids разом з Flexbox

Не звертайте увагу на маґлів – почніть користуватися Grids вже сьогодні. Необгрунтовані чутки про Flexbox Vs. Grids не повинні зупиняти вас від використання нових дивовижних макетів на сайті. Простий кастомізації і підтримки більш ніж достатньо для знайомства з цією технікою.

Не знаєте звідки почати, внизу вас чекають шаблони!

Ресурси

Спочатку вивчення Grids може викликати труднощі. На щастя, в мережі повно ресурсів:

Paper

Старий вірний друг. Краще всього почати мислити в стилі сітки, це намалювати її на папері. Там ви відразу побачите, що таке колонки, рядки і пропуски. Малювання на папері не займе багато часу, а ви краще зрозумієте сітку.

Інструменти розробника

У Firefox Developer Tools чудова вбудована інтеграція Grids, в якій ви зможете перемикати візуалізацію стовпців, рядків і пропусків.

Flexbox і Grids — ваші найкращі друзі в макетуванні

Chrome випустив схожий інструмент.