Заменяет ли CSS Grid Flexbox?

Заменяет ли CSS Grid Flexbox?

От автора: нет. Ну, в основном нет. Grid новее Flexbox и хуже поддерживается в браузерах. Именно поэтому нужно ответить на вопрос, заменит ли CSS Grid Flexbox.

Расставим все точки над i:

Grid умеет то, что не умеет Flexbox;

Flexbox умеет то, что не умеет Grid;

они могут работать в паре: ячейка grid может быть flexbox-контейнером. Flex-ячейка может быть grid-контейнером.

Практический курс по верстке адаптивного лендинга с нуля!

Научитесь с нуля верстать адаптивные лендинги на HTML5 и CSS3 за ближайшие 6 дней

Узнать подробнее

Если вы еще не слышали, то март 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 с первой строки до последней». Выглядеть это будет примерно так:

Практический курс по верстке адаптивного лендинга с нуля!

Научитесь с нуля верстать адаптивные лендинги на HTML5 и CSS3 за ближайшие 6 дней

Узнать подробнее

Далее, например, нам нужно, чтобы наш блок 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-контейнерами.

Заменяет ли CSS Grid Flexbox?

А flex-элементы могут быть grid-контейнерами:

Заменяет ли CSS Grid Flexbox?

Автор: Robin Rendle

Источник: https://css-tricks.com/

Редакция: Команда webformyself.

Практический курс по верстке адаптивного лендинга с нуля!

Научитесь с нуля верстать адаптивные лендинги на HTML5 и CSS3 за ближайшие 6 дней

Узнать подробнее
Самые свежие новости IT и веб-разработки на нашем Telegram-канале

Фреймворк Bootstrap - верстаем адаптивно, просто, быстро!

Получите видеокурс по основам Bootstrap

Получить

Метки:

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook:

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не робот.

Spam Protection by WP-SpamFree