Від автора: у своїй попередній презентації на Fluent Conf я продемонстрував загальні можливості і відмінності Flexbox і CSS Grid Layout. Поки що ми можемо працювати з CSS Grid Layout, включивши спеціальний прапор в настройках браузера, однак, як тільки технологія вийде офіційно, в макетах з’явиться безліч завдань, де можна буде використовувати Grid або Flexbox. Я трохи поміркував на цю тему.
Великі макети або UI елементи
Коли люди вперше бачать CSS Grid Layout, вони, як правило, думають, що це сітка контролер основного макета сторінки, виступаючий в ролі фреймворка з набором хедерів сайдбаров, основного вмісту і футеров.
У наведеному вище прикладі показаний цей спосіб застосування. Тільки прямі дочірні елементи можуть стати осередками сітки, а значить, якщо оголосити сітку на загальному контейнера, то хедер, панель, контент і футер стануть осередками сітки. Будь-які елементи всередині таких контейнерів можуть виводитися будь-яким потрібним способом.
Flexbox не так добре підходить для створення макетів даного типу. З допомогою Flexbox можна створити простий макет, як в демо вище, однак після оголошення флекс-контейнера, всі ряди (або колонки, якщо задати flex-direction: column) стають самостійними флекс-контейнерами. У колонках або рядах весь простір розподіляється між елементами рівномірно, і ви не зможете вибудувати в ряд елементи, як показано вище.
В цьому і є найбільша відмінність між Grid і Flexbox. Flexbox в першу чергу призначений для виведення елементів в одному напрямку – в рядок ЧИ стовпець. Grid можна використовувати для виведення елементів у двох напрямках одночасно – рядки Та стовпці.
Одномірне розташування або двовимірне
Найпростіший приклад двох різних макетів.
У верхній частині макета я з допомогою Flexbox виводжу на екран кілька карток. Контейнера встановлено властивість flex-wrap: wrap, тому елементи вишикувалися у два стовпці. Також були задані властивості flex-grow: 1, flex-shrink: 1 і flex-basis: 300px. Ідеальна ширина блоків становить 200px, але вони можуть бути як ширшою, так і вужчою.
Якщо екран занадто малий, то на одному рядку показується 3 блоку, а на другий 2. Якщо задати властивості flex-grow значення 1, то після видалення значення flex-basis простір, що залишився, розподіляється рівномірно між усіма блоками. У рядку 1 поміщається 3 блоку, і вони вже, ніж блоки у другому рядку, так як там їх всього 2.
Так працює flexbox. Тим не менш, велика частина питань, які мені ставили, коли у розробників виникали проблеми з flexbox, виникали тому, що ті намагалися виводити елементи за допомогою даної технології в двох вимірах. В даному випадку вам потрібен Grid Layout.
У другій частині демо ми задаємо сітку на контейнері, а дочірні елементи контейнера стають осередками. Осередки сітки можна виводити в рядку, так і в стовпець. Якщо один з елементів необхідно розтягнути на два стовпці або рядки, нам знадобиться його якось знайти.
Відштовхуємося від визначення вмісту або від визначення сітки
У наведеному вище прикладі ми спостерігаємо, як при використанні Grid Layout після створення сітки її осередки адаптуються під доступні розміри.
Якщо у вас багато елементів, не треба вибудовувати їх в один ряд з іншими елементами, просто вибудовуйте їх на рівномірних відстанях один від одного, як в flexbox. Найпростіший приклад, який демонструє те, як задати між елементами рівні відстані, це властивість justify-content: space between.
В Grid є властивості, які відповідають за розподіл у просторі і вирівнювання (властивості Box Alignment Module). Тобто можна погратися з вирівнюванням і відстанями між елементами сітки. Але факт залишається фактом – з-за двовимірного підходу в grid не можна зробити так, щоб один рядок сітки відображалася не так, як рядок вище. Вам доведеться задавати властивості окремих елементів, щоб вони займали декілька клітинок або використовувати різні значення вирівнювання.
Вибір за вами. Ви хочете відображати контент тільки порядково або у колонках? Тоді вам потрібен flexbox.
Або ви хочете працювати з сіткою? Щоб елементи сітки автоматично розміщувалися в осередках сітки, або ж можна контролювати їх позиціонування за допомогою рядків і областей сітки. Тоді вам потрібен grid.
Більше прикладів використання сітки ви можете знайти в моїй колекції на сайті Grid by Example.
