Від автора: немає. Ну, в основному немає. Grid новіше Flexbox і гірше підтримується в браузерах. Саме тому потрібно відповісти на питання, чи замінить CSS Grid Flexbox.
Розставимо всі крапки над i:
Grid вміє той, що не вміє Flexbox;
Flexbox вміє той, що не вміє Grid;
вони можуть працювати в парі: осередок grid може бути flexbox-контейнером. Flex-комірка може бути grid-контейнером.
Якщо ви ще не чули, то березень 2017 був успішним для Grid. Відбувся реліз, інструментом можна користуватися і абсолютно без вендорних префіксів в Chrome, Opera, Firefox і Safari. Навіть Edge підтримує сітки, хоча й у більш ранньої версії специфікації, в якій можна отримати якусь підтримку з допомогою Autoprefixer.
Отже. Grid замінює Flexbox? Відразу складно відповісти на це питання. Особливо якщо ви тільки починаєте вивчати дивний, чужий синтаксис Flexbox. Що, вчити ще один синтаксис? Блін.
У чому Grid краще Flexbox:
створення макетів цілих сторінок. Навіть якщо враховувати тільки продуктивність, сітки краще;
створення сіток у формі літер. Наприклад, колонки у формі Х з роздільником у формі Y. Grid-gap – чудова властивість, роздільники в сітках – основна точка відтворення;
зниження залежності від медіа запитів за допомогою потужного функціоналу типу автомакетирования, minmax(), repeat() і auto-fill. Відмінна ідея.
І ще один великий плюс: Grid позиціонує елементи в двох площинах, по колонках і рядках. Це перше. Rachel Andrew доступно все пояснила: «Flexbox спочатку призначений для розкладки елементів в одній площині, рядка АБО колонки. Grid ж позиціонує елементи в двох площинах, рядка І колонки.»
Давайте розберемо декілька демо. Наприклад, ми створюємо компонент горизонтальне меню – ідеальний приклад використання Flexbox, так як контент розташований уздовж однієї осі. Можете погратися з властивостями в демо Кріса нижче, щоб зрозуміти всю силу Flexbox:
Однак бувають випадки, коли ці flexbox-властивості, такі як justify-content та align-items, необхідно використовувати в зв’язці з властивостями Grid. Для прикладу розберемо демо нижче:
Спершу ми створили блок .wrapper і задали йому display: flex;. Так ми можемо задати max-width в нашому .grid і з допомогою властивості justify-content: center; розташувати блок в центрі вьюпорта. Тепер можна задати потрібну кількість колонок.
.wrapper {
display: flex;
justify-content: center;
}
.grid {
display: grid;
max-width: 800px;
grid-template-columns: 1fr 2fr;
}
Це лише перший етап. Тепер давайте розтягнемо .ad на весь рядок у сітці. Для цього можна звернутися безпосередньо до нашого div і не думати про інших дочірніх елементах сітки:
.ad {
grid-column-start: 1;
grid-column-end: 3;
}
Код вище говорить «розтягни цей div з першого рядка до останньої». Виглядати це буде приблизно так:
Далі, наприклад, нам потрібно, щоб наш блок ad завжди був в два рази більше першого рядка. І це можна зробити! Для цього нам знадобиться властивість grid-template-rows:
.grid {
display: grid;
max-width: 800px;
grid-template-columns: 1fr 2fr;
grid-template-rows: 1fr 2fr 1fr;
}
Розшифровуємо код зверху: «в сітці три рядки, зроби так, щоб друга рядок завжди була в два рази більше першої і третьої». Іншими словами, ми створюємо зв’язок між різними рядками і одночасно задаємо кількість стовпців у сітці!
В CSS Grid зв’язку можна задавати одночасно як горизонтально (grid-template-columns), так і вертикально (grid-template-rows). Flexbox ж замкнений або на горизонтальних макетах, або на вертикальних (flex-direction). Але це не означає, що від нього треба відмовлятися.
Можливі труднощі: 2D-макет на Flexbox
Плутанину може викликати той факт, що на чистому Flexbox абсолютно точно не можна створити багатовимірний макет. Наприклад:
У цьому макеті точно є рядки та колонки, навіть є кінцевий елемент, розтягнутий на кілька колонок. Макет гнучкий, і його легко створити. Для цього на контейнер потрібно призначити flex-wrap, а дочірні елементи повинні мати flex-basis в 1/3 ширини контейнера. Flex-grow повинен розтягувати дочірні елементи за необхідності (властивість flex – це скорочена версія для властивостей flex-grow, flex-shrink і flex-basis).
Метод не можна назвати неправильним, це лише один із способів. І ви, звичайно, можете посперечатися про те, що він менш інтуїтивний і адаптується.
Можливі труднощі: 1D-макет на Grid
Grid вміє робити 2D-макети, тобто можна встановити обидві властивості grid-template-rows і grid-template-columns, але ставити обидва властивості необов’язково. Нижче представлено демо, в якому використовується властивість для розкладки блоків по горизонталі:
І цей метод не можна назвати поганим. Фактично, ви могли б легко довести, що цей спосіб простіше зрозуміти і він коротший, ніж Flexbox. Наприклад, на дочірніх елементах взагалі не потрібні макетні властивості. Також можна посперечатися, що чистий 1D-макет краще виконати в Flexbox, так як в цьому інструменті набагато легше змінювати елементи місцями (пересувати всі елементи на одну сторону, змінювати порядок, рівномірно розподіляти елементи тощо).
Вкладеність
З’ясуємо все ще раз! Корисно запам’ятати той факт, що grid-осередки можуть бути flex-контейнерами.
А flex-елементи можуть бути grid-контейнерами:
