У каждого начинающего веб-разработчика рано или поздно возникает вопрос - какую технологию выбрать или что именно использовать в конкретном случае? В случае с CSS этот вопрос часто звучит так: Flexbox или Grid? На эту тему написано огромное количество статей, нет смысла повторяться. Здесь я просто выписал для себя основные моменты, своего рода памятку, что когда лучше использовать.
1. Flexbox и Grid не альтернатива друг другу, а взаимодополняющие инструменты, их можно и нужно использовать вместе.
2. Flexbox - это одномерные макеты (т.е. строка или столбец), Grid - двухмерные (и строки, и столбцы). Подробности см. тут.
Это значит, что Flexbox располагает элементы или вдоль горизонтальной оси, или вдоль вертикальной, т.е. вам нужно решить, что в основе вашего дизайна - строки или колонки.
3. Grid как более новую технологию поддерживают не все браузеры, но ситуация меняется с лучшую сторону.
4. Grid хорошо подходит для создания больших, иногда нестандартных (ассиметричных и т.п.) макетов. Распространено мнение, что с помощью Grid можно быстро разметить всю страницу целиком, а Flexbox позволяет точнее размещать мелкие детали внутри элементов. На самом деле это не совсем так. С помощью Grid можно также достичь точности, а flex нередко непредсказуем.
5. Flexbox больше про следование/поток контента, чем про его точное размещение: ширина или высота элемента определяется его содержимым. Т.е. элементы расширяются или сжимаются в зависимости от содержимого или доступного места. Flexbox дает больше места крупным элементам, и меньше - мелким, посредством чего достигается читабельность контента.
Еще раз: во Flexbox конечный внешний вид определяется его контентом, а в Grid внешний вид не зависит от содержимого. Вот тут наглядный пример.
6. Если Flexbox в процессе работы вам кажется сложным и неудобным, возможно, вы пытаетесь использовать его как Grid, т.е. контролировать размеры и пространство.
7. Если нужно выровнять элемент по вертикали или горизонтали, вставить форму, иконку и т.п. без четкого указания размера элемента, закрепить элемент в футере, то это скорее Flexbox.
8. Во Flexbox и Grid по-разному работает wrap. Посмотрите вот тут.
Любопытное видео об использовании Flexbox и Grid (в том числе показано, как сделать responsive без media queries):
Ресурсы по теме:
Grid в примерах
Layout Land - Youtube-канал Jen Simmons, графического дизайнера, веб-разработчика и члена рабочей группы CSS Консорциума WWW.
A Complete Guide to Grid
How to combine Flexbox and CSS grids for efficient layouts
Flexbox Grid.
