Верстаємо правильно знайомство з Flexbox та Grid

Десь у 2012 чи 2013 році я познайомився з веб-розробкою. Поступово я почав вивчати цей напрямок самостійно. Незабаром я зрозумів, що CSS надає сенсу багатьом речам, але не створює адекватної розмітки. Існує стільки хаків, що розібратися в них надто складно. Ось чому в сучасних стандартах, про які йтиметься у цій статті, роботі з розміткою приділили особливу увагу.

Що ви дізнаєтесь із цієї статті:

  • як раніше працювали з CSS-розміткою;
  • різницю між застарілими підходами та сучасними стандартами;
  • як розпочати роботу з новими стандартами (Flexbox та Grid);
  • чому вас мають хвилювати ці сучасні стандарти.

Як раніше працювали з CSS-розміткою

Давайте змоделюємо стандартне завдання: як створити сторінку з двома секціями — бічною панеллю і зоною з основним контентом, у яких однакова висота, незалежно від розміру контенту?

Ось приклад того, чого ми прагнемо:

Бічна панель та зона з основним контентом однакової висоти, незалежно від розміру контенту

Для початку я покажу, як вирішити це завдання за допомогою застарілих підходів.

1. Створюємо div із двома елементами

Очевидно, що в main більше тексту.

Виділимо aside кольором, щоб його простіше було відрізнити:

2. Розміщуємо обидві секції поруч

Для цього напишемо таке:

Цей стиль розділяє доступний простір у необхідних пропорціях та встановлює float для aside та main.

Два блоки, розташовані поруч

Для тих, хто не знайомий з float: це відносно старий спосіб переміщення елементів вліво або вправо.

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

3. Використовуємо трюк із display: table

Щоб вирішити цю проблему, потрібно використати display:table.

Якщо ви з ним не знайомі, то ось що треба робити:

  1. Робимо батьківський контейнер (у нашому випадку елемент body) таблицею:
  2. Забираємо float і робимо дочірні елементи aside та main осередками таблиці:

Як тільки ми зробили це, завдання можна вважати вирішеним. Принаймні так її вирішували раніше.

Обидва блоки тепер однаковою висоти.

Різниця між застарілими підходами та сучасними стандартами

Тепер, коли у вас є уявлення про те, як проблему вирішували раніше, погляньмо, на що здатні Flexbox і Grid.

Flexbox та Grid – це ідеальні рішення для CSS-розмітки, які є сучасними стандартами. Якщо вам необхідно писати CSS-код на хорошому рівні, обов'язково вивчіть їх.

Розв'язання задачі за допомогою Flexbox

Контекст форматування Flexbox ініціалізується шляхом створення flex-контейнера.

Батьківським елементом є body. Він містить бічну панель та основну зону. Створюємо контейнер:

Flexbox у дії

Не забудемо про пропорції:

Вуаль! Проблему можна вважати вирішеною:

З Flexbox можна робити багато різних речей:

    Відцентрувати бічну панель та основну зону по вертикальній осі:

Бічна панель та основний контент відцентровані по вертикальній осі

Бічна панель відцентрована по вертикальній осі

Бокова панель тепер розміщена після блоку з основним контентом

І я торкнувся лише верхівки айсберга Flexbox.

Flexbox доступний у більшості підтримуваних браузерів. Їм можна повноцінно користуватися Firefox з 28 версії, Chrome з 29, Safari з 6.1 і Edge з 12.

Прим. перев. Розібратися з Flexbox допоможе наше наочне введення.

Вирішення проблеми за допомогою Grid

На відміну від Flexbox, який переважно працює в одному вимірі, з CSS Grid ви можете використовувати як ряди, так і колонки. Подивимося, як вирішити нашу проблему за його допомогою.

Починається так само, як і у випадку з Flexbox. Створюємо контейнер:

І ось що ми отримаємо:

Grid доступний у більшості підтримуваних браузерів, хоч і в меншій кількості. Їм можна повноцінно користуватися Firefox з 52 версії, Chrome з 57, Safari з 10.1 і Edge з 16.

Наше останнє зображення поки що ніяк не відрізняється від попередніх. То в чому ж магія?

Що якщо ми розділимо пропорції ширини, як раніше:

Пропорційний розподіл ширини для дочірніх елементів

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

Ось ми і підійшли до суті Grid-розмітки. Після ініціалізації Grid-контейнера за допомогою display: grid необхідно визначити ряди та рядки всередині нього.

Ось як це робиться:

Рішення в один рядок — красиво, чи не так? grid-template-columns визначає пропорції стовпців у сітці.

Але за допомогою Grid можна зробити набагато більше.

Спочатку додамо трохи кольору головному блоку, щоб приклади були наочнішими:

Ось що ми повинні отримати:

Заливання кольором зони основного контенту

Подивимося, що хорошого може запропонувати Grid:

    Можна визначити розрив між стовпцями:

З розривом між колонками виглядає набагато охайніше.

Немає необхідності додати відступи до блоків aside і main : це робить grid-column-gap . Можна зробити стільки стовпців, скільки вампотрібно. Приклади вище використовували лише по одному елементу aside і main. Додамо ще два:

Дві колонки все ще відповідають пропорціям 30%/70%

Додано розрив між рядками

Для спрощення можна використовувати скорочення: grid-gap: 15 px замість grid-row-gap та grid-column-gap . Можна визначати розміри рядків:

Різна висота рядків

Тепер висота першого, другого та третього рядків дорівнює 200, 300 та 400 пікселів відповідно.

Для початку вистачить і цього, але це далеко не все.

Як розпочати роботу з новими стандартами?

Ви побачили приклад того, як Flexbox та Grid надають зручніші рішення для розмітки. Тож як почати?

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

Чому вас мають хвилювати ці стандарти?

Якщо ви досі не зрозуміли, чому варто використовувати Flexbox та Grid, то ось кілька проблем, з якими ви можете зіткнутися під час використання попередніх рішень:

  • якщо ви використовуєте «плаваючі» блоки та clearfix, то знаєте, що з ними можуть виникати проблеми;
  • при абсолютному позиціонуванні елементи можуть накладатися один на одного;
  • під час використання display: table залишається багато непотрібної розмітки;
  • у разі використання inline-block виникнуть проблеми з порожніми місцями.