От автора: нет. Ну, в основном нет. 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; расположить блок в центре вьюпорта. Теперь можно задать нужное количество колонок.
|
1 2 3 4 5 6 7 8 9 10 |
.wrapper { display: flex; justify-content: center; } .grid { display: grid; max-width: 800px; grid-template-columns: 1fr 2fr; } |
Это лишь первый этап. Теперь давайте растянем .ad на всю строку в сетке. Для этого можно обратиться напрямую к нашему div и не думать об остальных дочерних элементах сетки:
|
1 2 3 4 |
.ad { grid-column-start: 1; grid-column-end: 3; } |
Код выше говорит «растяни этот div с первой строки до последней». Выглядеть это будет примерно так:
Далее, например, нам нужно, чтобы наш блок ad всегда был в два раза больше первой строки. И это можно сделать! Для этого нам понадобится свойство grid-template-rows:
|
1 2 3 4 5 6 |
.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-контейнерами:
Автор: Robin Rendle
Источник: //css-tricks.com/
Редакция: Команда webformyself.
