Flexbox проти Grid - Як створити найпоширеніші HTML-макети

В Інтернеті так багато чудових ресурсів CSS. Але що, якщо ви просто хочете простий макет, і ви хочете це ЗАРАЗ?

У цій статті я описую 5 найпоширеніших макетів веб-сторінок та способи їх створення за допомогою Flexbox та Grid.

Як це буде працювати

Під кожним макетом є посилання для повного коду HTML і CSS на CodePen.

Зверніть увагу, що я використовую SASS для складання визначень стилів, тому, якщо ви хочете зробити те саме на своєму локальному, встановіть SASS, використовуючи:

npm i sass -g 

Основні шаблон картки

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

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

Переможець: Flexbox

CodePen Flexbox, CodePen Grid

Тепер почнемо створювати наші різні макети.

# 1 Картка з центром по вертикалі та горизонталі

У Flexbox нам потрібен один елемент, який центрується горизонтально, а інший (дочірній елемент), який центрирується вертикально.

Порядок елементів визначається flex-direction. Як елемент позиціонує себе у доступному просторі, встановлюється align-selfелементом або align-itemsйого батьківським елементом .

У Grid нам потрібні три стовпці та три рядки. Потім ми розміщуємо картку в середній комірці.

Горизонтальне центрування легко. Ми визначаємо три стовпці та їх розміри, використовуючи, grid-template-columns: auto 33% autoоскільки картка повинна бути шириною до 1/3 видимої області.

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

Однак ми можемо вирішити це за допомогою додаткового обгорткового елемента навколо картки та відцентрувати її за допомогою margin.

Переможець: Flexbox

CodePen Flexbox, CodePen Grid

# 2 Дві картки по центру вертикально та горизонтально

Часто нам потрібно відцентрувати не лише один елемент. Ці дві картки також повинні підтримувати однакову висоту, якщо одна чи інша містить довший текст.

За допомогою Flexbox нам потрібно обернути обидві карти в інший елемент і використовувати його для центрування обох карток одночасно.

Ми не можемо використовувати align-itemsтут, оскільки це стосується осі Y у цьому випадку. Нам необхідно визначити , як простір, що залишився на X-осі повинні бути розподілені з justify-content: center. Це гарантує, що обидві карти будуть горизонтально відцентровані.

Якщо ми опустимо проблему змінної висоти Grid, ми зможемо досягти того самого результату навіть без будь-яких додаткових елементів обтікання. Цього разу ми визначаємо сітку з п’ятьма стовпцями з grid-template-columns: auto 33% 50px 33% auto. Решта залишається такою ж, як у попередньому прикладі.

Переможець: Flexbox

CodePen Flexbox, CodePen Grid

# 3 Кілька карток однакової ширини та висоти

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

Це можна зробити у Flexboxвикористання flex-wrap: wrap. Елементи переносяться на наступний рядок, якщо їх ширина перевищує залишок простору кожного рядка. Однак однакова висота зберігається лише в межах одного рядка, якщо ви не визначите це явно.

Сіткапоказує тут свою справжню силу. Цей макет можна створити, використовуючи grid-auto-rows: 1frоднакові висоти для всіх рядків.

Переможець: Сітка

CodePen Flexbox, CodePen Grid

# 4 Чергування тексту та зображень по вертикалі та горизонталі по центру

У цьому прикладі ми маємо текст із кнопками CTA, що супроводжується зображенням з іншого боку. Обидва компоненти повинні бути вертикально відцентровані, оскільки їх розмір може змінюватися.

Це шматок пирога для Flexbox. Кожен рядок - це articleелемент, розділений на два контейнери для обтікання, .imgта .content. Вони потрібні для рівномірного розподілу розмірів ( flex-basis: 50%).

Вертикальне центрування внутрішнього змісту визначається align-items: center.

Чергування досягається шляхом зміни напрямку Flexbox flex-direction: row-reverseна кожну непарну статтю.

Сіткатеж добре обробляє цей варіант використання. Нам не потрібно визначати одну гігантську сітку, а скоріше одну для кожної article.

Він визначає однаково широкі стовпці, які вертикально відцентровані за допомогою align-items: center.

Чергування визначається на рівні комірки переключеними значеннями для grid-column.

Переможець: краватка

CodePen Flexbox, CodePen Grid

№5 Горизонтальний заголовок із меню

Для досягнення цієї конструкції за допомогою Flexbox обидві сторони заголовка повинні бути представлені одним елементом.

Логотип та назва компанії утворюють один anchorзліва, а меню - це один navелемент праворуч. Flexbox позиціонує їх за допомогою justify-content: space-between.

У Grid нам потрібні дві колонки - одна для логотипу, а друга для меню. Меню - це ще одна сітка, яка рівномірно розподіляє розмір стовпців grid-template-columns: repeat(4, minmax(0, 1fr)).

Проблема тут полягає в тому, що якщо ми хочемо додати в меню ще один пункт, нам також потрібно налаштувати CSS.

Переможець: Flexbox

CodePen Flexbox, CodePen Grid

І переможець ...

Остаточний рахунок 5: 2 на користь Flexbox, але це не означає, що він стає остаточним переможцем CSS. Бувають ситуації, коли для досягнення того, що вам потрібно, потрібно скористатися тим чи іншим, іноді навіть обома разом.

Якщо вам потрібно гнучке та умовне позиціонування, використовуйте Flexbox. Якщо ви хочете створити списки або подібні структури, які вимагають однаково великих елементів або мають форму таблиці, використовуйте Grid.

Як фронт-енд розробник, ви нікуди не дінетесь, не знаючи обох.

Довідник Flexbox, Довідник Grid

PS Якщо я пропустив макет, який ви використовуєте щодня, повідомте мене в Twitter, і я підготую продовження :-)