Flex или grid что лучше

Выбор CSS макета — Grid или Flexbox?

Удачно оформленный макет удерживает пользователей на сайте, так как делает важные элементы доступными и легко находимыми. Слабые же макеты отпугивают посетителей, которые покидают ресурс, так и не найдя того, за чем пришли.

В веб-дизайне макет – это то, как сайт отображается на экране. В HTML 5 есть довольно много элементов, определяющих внешний вид веб-страницы: заголовок, навигационный блок, абзац, сноска, статья и нижний колонтитул, каждый из которых имеет свое особое значение в создании макета. Вместе же они формируют четыре основных раздела страницы – заголовок/баннер, поисковый блок, содержимое и нижний колонтитул.

Языки программирования помогают сделать сайты «живыми», но в основе каждой страницы по-прежнему лежит старый добрый HTML. При рассмотрении макетов необходимо учитывать факторы, определяющие их качество, а именно отзывчивость, порты просмотра, устройства отображения, браузеры и размеры экранов пользователей. Грамотный макет не только здорово смотрится, но также может сохранять задуманную структуру, вписываясь в экраны с любым возможным соотношением сторон. Как раз за эту подстройку и отвечает CSS. В текущей статье мы в общих чертах рассмотрим два его мощнейших инструмента: Flexbox и Grid.

Что такое макет CSS FLEXBOX?

Flexbox – это общепринятое сокращение для Flexible Box Module (модуль гибкого контейнера), который представляет собой одномерную модель макета. Это значит, что одновременно он может работать только со строкой или столбцом, но не с обоими сразу. Flexbox эффективно справляется с выравниванием, распределением и направлением элементов страницы.

Двумя основными понятиями этой модели макета являются главная ось и поперечная ось. Главная ось flex-контейнера – это основное направление, вдоль которого выстраиваются flex-элементы, поперечная же ось ей перпендикулярна.

Для начала давайте обернем HTML-элементы div во flex-wrapper.

В CSS родительский контейнер “flex-wrapper” преобразуется во flexbox с помощью простой инструкции.

При добавлении элементов и свойств я буду использовать яркие цвета и отступы, чтобы выделить контейнеры и div-элементы.

Вы можете видеть, как удачно элементы div располагаются по горизонтали, но при этом они занимают не всю область контейнера, и в конце остается пустое пространство. Это можно исправить, добавив flex-grow.

Свойство flex-grow отвечает за распределение каждого элемента flex-контейнера. По умолчанию значение этого свойства равно 0, присваивая же разное количество единиц div-элементам, вы увеличиваете их по отношению к остальным. Противоположный эффект дает свойство flex-shrink.

FLEX-DIRECTION

Flex-direction определяет направление размещения элементов контейнера. С его помощью можно заставить их располагаться по направлению вверх, вниз, влево или вправо, а также в обратном порядке. По умолчанию элементы flex-контейнера упорядочены вдоль главной оси слева направо.

Здесь элементы также отображаются слева направо, но в обратном порядке. В итоге четвертый div становится первым, а первый, в свою очередь, последним.

Здесь же упорядочивание происходит уже вертикально – сверху вниз.

Теперь элементы также расположены вертикально, но в обратном порядке, т.е. четвертый оказался вверху, а первый внизу.

FLEX BASIS

Flex basis определяет размер элемента внутри контейнера. При этом значение размера может указываться в em, px или процентах. Это свойство отличается от flex-grow тем, что не распределяет пространство между элементами контейнера равномерно.

Flex – это сокращенное свойство, объединяющее flex-shrink, flex-grow и flex-basis. Его рекомендуется использовать вместо раздельного написания свойств, указывая в нем их значения в следующем порядке: flex-grow, flex-shrink, flex-basis.

JUSTIFY-CONTENT И ALIGN-SELF

Justify-content и align-self – это идеальное решение для размещения div или контейнера в центре окна браузера.

CSS GRID Layout

CSS grid (сетка) представляет собой мощный двухмерный макет, при использовании которого можно одновременно работать со строками и столбцами. В основе CSS Grid лежит неявное разделение экрана на сетку из 12 частей, в которые в итоге и вписываются элементы.

Преимущество этой технологии перед Flexbox и другими видами макетов в ее возможности работать двухмерно. При этом она также упрощает позиционирование, и элементы контейнера могут размещаться, перекрывая друг на друга.

ОПРЕДЕЛЕНИЕ СЕТКИ В CSS GRID

Преобразование HTML-структуры в СSS сетку выполняется одной простой CSS инструкцией.

GRID TEMPLATE-COLUMNS И GRID-TEMPLATE-ROWS

Свойства grid-template-columns и grid-template-row устанавливают величину столбца или строки, определяя размер div-элементов согласно присвоенным значениям, которые указываются в px, fr, процентах или em.

grid-template-columns: 40px 1fr 20%; — эта строка дает браузеру команду присвоить первому div ширину 40px, второй же занимает одну долю отведенного места, а третий 20%. Элементы с 4 по 6 автоматически смещаются под первые 3 и принимают те же значения в том же порядке, т.е. div 4 получает размер 40px, div 5 — одну долю, а div 6 – 20%.

Чтобы поместить все шесть div-элементов в одну строку нужно указать в свойстве grid-template-column шесть значений. При этом не обязательно использовать для столбцов разные единицы измерения, можно задать только проценты, fr или px.

grid-template-rows: 200px; — эта строка присваивает всем div-элементам высоту в 200px.

Присвоив 16,7% для 6 точек, я успешно разделил шесть элементов контейнера по шести равным частям экрана. Значение 16,7% я выбрал, потому что при умножении 16,7 на 6 как раз получится 100% ширины экрана.

Использование процентов и пикселей работает идеально, но им недостает гибкости, и они уступают наиболее эффективному компоненту – долям CSS сетки.

Fr – это дробная единица, которая присваивает каждому элементу одну долю доступного пространства, которое можно увеличивать, выделяя под div необходимую ему область.

Теперь наше свойство grid-template-columns стало:

В результате каждый div-элемент был размещен на экране равномерно.

Изменив второе и четвертое значения, мы сделали соответствующие элементы вдвое больше остальных. Самое же главное, что они по-прежнему распределяются в браузере равномерно и имеют высокую отзывчивость.

ФУНКЦИЯ REPEAT

Вместо того, чтобы повторно переписывать значения, можно задействовать функцию repeat, которая позволит сделать это всего один раз.

Синтаксис этой функции относительно прост. Сначала пишем слово “repeat”, после которого определяем, сколько раз нужно повторить размер, в данном случае 6, а затем указываем величину единицы измерения. Эта функция аналогичным образом работает со свойством template-row и позволяет использовать как fr, em, px, так и проценты.

Gap – это отступ, представляющий свойство CSS сетки, которое позволяет указывать расстояние между div-элементами контейнера. Работает оно точно также, как свойство margin и измеряется обычно в px.

GRID-COLUMN-START/GRID-COLUMN-END И GRID-ROW-START/GRID-ROW-END

Свойства grid-column-start и grid-column-end помещают элемент сетки в конкретное место столбца относительно определенных строк сетки. Свойства же grid-row-start и grid-row-end делают то же самое, но в отношении строки. Присваивая этим свойствам значения, можно удобно управлять начальной и конечной точкой элемента сетки, выделяя ему нужную область.

Если вы присвоите указанные значения первому div, то заметите, что он смещает второй div на одну единицу и занимает первые две позиции, смещая третий div вниз. В отношении же строк теперь он занимает три позиции и становится выше.

В программировании индексация производится по особому правилу, согласно которому мы обычно начинаем отсчет с 0. В этом случае последнее значение, как правило, упоминается, но не учитывается. Например, значение свойства grid-column-end равно 3, но по факту оканчивается оно на 2-х также, как и grid-row-end оканчивается на 3-х, а не на 4-х.

GRID-COLUMNS И GRID-ROW

Это сокращенный вариант для свойств grid-column-start/grid-column-end и grid-row-start/grid-row-end. В качестве значений в этом случае через слэш указываются начальные и конечные позиции элемента:

СОЗДАНИЕ ГАЛЕРЕЙ

CSS сетка идеально подходит для создания галерей. С помощью небольшого количества кода и манипуляций вы можете создать их прекрасные отзывчивые макеты.

Мозаичный макет галереи

Такой макет создает равные плитки изображений, равномерно распределенные по странице/контейнеру.

Этот код создаст прекрасный макет плиточной галереи изображений.

Мозаичный макет

Макет Masonry-галереи

Этот макет уже неравномерен, так как не имеет фиксированной высоты строк. Однако при помощи grid-columns и grid-rows мы можем подстраивать изображения, чтобы они вписывались в назначенные дробные единицы и перемещались по ним нужным нам образом.

Макет Masonry

GRID TEMPLATE AREAS

Свойство Grid-template-areas присваивает элементам имена, чтобы свойство grid-area могло на них ссылаться. Работает оно аналогично grid-column и grid-row, позволяя легко отображать и размещать конкретные области в структуре сетки.

GRID AREAS

Ссылаться на именованные области необходимо в порядке их вызова. Например, область сетки для #one не может быть нижним колонтитулом, поскольку эта область сетки именуется последней. Нарушение же правильного порядка приведет к ошибке в дизайне.

Что же лучше — Flexbox или Grid?

В своей сути Grid является макетом на основе контейнеров, а Flexbox на основе содержимого. И тот, и другой по-своему эффективен, хотя CSS Grid включает больше возможностей и позволяет легче манипулировать строками и столбцами сетки. Прежде чем решать, какой использовать, следует проанализировать сложность, структуру и содержимое создаваемого вами сайта. Приведу еще одно несколько углубленное сравнение: в макете flexbox размер ячейки (flex-элемента) определяется в самом flex-элементе, а в макете Grid размер элемента определяется уже в его контейнере.

Лично я могу посоветовать использовать CSS Grid для общего макета сайта, а затем уже Flexbox для элементов контейнера. Однако CSS Grid также отлично работает с отдельными элементами и учитывает нюансы реальной структуры сетки лучше, чем Flexbox. Например, инструкция grid-template-areas отобразит структуру сайта буквально за несколько секунд, после чего вы сможете сосредоточится на выравнивании контента по своему усмотрению.

Решающая CSS битва: Grid против Flexbox

Узнайте, чем они отличаются и когда их нужно использовать вместе.

��Мой Твиттер — там много из мира фронтенда, да и вообще поговорим��. Подписывайтесь, будет интересно: ) ✈️

CSS Flexbox стал крайне популярным среди Front-end разработчиков за последние несколько лет. И это не удивительно, поскольку теперь стало легче создавать динамические шаблоны и выравнивать контент внутри контейнеров.

Однако, на районе появился новый парниша по имени CSS Grid и у него очень много тех же возможностей, что и у Flexbox. В одних случаях, он даже лучше, чем Flexbox, в то время как в других совершенно нет.

Такой расклад событий вводит разработчиков в смятение. Поэтому, в этой статье мы сравним два модуля, как на микро, так и на макро уровнях.

Одномерное против двумерного

Если вы хотите получить урок из этой статьи, то пусть он пусть он будет таким. Flexbox это одномерные макеты, а Grid это двумерные.

Это означает, что если вы раскладываете объекты в одном направлении, к примеру, кнопку в header, то вам нужно применять Flexbox.

Это даст вам больше гибкости, чем в случе с CSS Grid. Также с этим будет проще работать в дальнейшем, а самое важное вы избежите лишней писанины.

Однако, если вы собираетесь создать целый макет в двух измерениях, как с row , так и с column — то вам нужно использовать CSS Grid.

В этом случае с CSS Grid вы получите больше гибкости, да и ваша разметка будет проще, а код станет понятнее для дальнейшей работы.

Теперь вы конечно же можете комбинировать оба метода. В примере выше, было бы идеально использовать Grid для всего макета, а затем Flexbox для выравнивания контента внутри header. Таким образом вы воспользуетесь лучшим от двух «взглядов на мир».
В общем, ближе к концу статьи вы увидите, как именно это сделать .

Упор на контент или на макет?

Ещё одно кардинальное отличие в том, что Flexbox берет за основу контент, в то время как в основе Grid лежит сам макет и его общая разметка. С первых слов это всё довольно абстрактно, поэтому давайте взглянем на конкретный пример, который позволит нам легче понять суть того, что происходит.

Мы будем использовать header из предыдущего параграфа. Вот как выглядит его HTML.

Перед тем как мы зафлексбоксим макет, эти дивы будут располагаться друг над другом. Как тут:

Flexbox header

Итак, когда мы укажем display: flex все элементы аккуратненько встанут в линию.

Для того, чтобы отправить кнопку logout в правый угол, мы просто укажем нужный элемент и зададим ему внешний отступ.

Это даст нам такой результат:

Что нужно тут знать, так это то, что мы дали элементам самим решить как им расположиться. Изначально не предопределялось ничего, кроме display: flex .

Это основное различие между Flexbox и Grid и сейчас это станет ещё понятнее, после того как мы переделаем header на Grid’ах.

Пусть даже CSS Grid не задуман для создания одномерных header’ов, это всё же хороший пример для проработки в этой статье, так как он научит понимать основные понятия между Flexbox и Grid.

Grid header

Мы можем создать наш header несколькими разными способами с помощью CSS Grid. Тут же мы увидим довольно понятный способ, где у grid есть десять колонок, каждая из которых является частью формирования ширины элемента.

Это будет идентично решению через Flexbox.

Но давайте взглянем поглубже и посмотрим в чем же разница. Зайдем в Chrome inspector, чтобы увидеть границы колонок.

Ключевое различие тут в том, что мы должны сначала выставить определения колонок макета. Начиная с определения ширины колонок и потом выставляя контент в доступные ячейки grid.

Этот подход заставил нас четко определить позицию, на сколько колонок мы хотим разделить header.

Пока мы не изменим сетку, выходит, что мы застряли с этими десятью колонками. Это ограничение, с которым бы мы не столкнулись, имея дело только с Flexbox.

Для того, чтобы кнопку logout поставить в конец секции справа, мы поставим этот элемент DOM в десятую колонку, как тут:

Вот как это будет выглядеть при детальном виде расположения колонок.

Мы не могли просто задать этому элементу margin-left: auto; , потому что кнопка logout уже была помещена в конкретную ячейку макета, а именно в третью колонку. И чтобы сдвинуть её, нам нужно найти ещё одну ячейку.

Совмещаем два подхода

А теперь давайте посмотрим, как применять два эти подхода вместе, объединяя header со всем нашим макетом. Мы начнем с построения самого макета.

Вот разметка:

Вот CSS:

Вот так мы расставим элементы по сетке:

Теперь мы просто добавим header. Его мы зафлексбоксим, хотя он уже является элементом нашего Grid CSS.

Теперь мы можем установить кнопку logout справа.

И теперь, у нас идеальный макет, который использует как Grid, так и Flexbox. Вот как выглядят оба контейнера.

Итак, теперь у вас имеется четкое понимание основ и конкретных различий между Flexbox и Grid, и самое важное — это понимание того, как использовать их вместе.

Поддержка браузеров

Перед тем как мы закончим, также надо упомянуть о поддержке браузерами. На момент написания этой статьи, 77% глобального трафика сайтов поддерживали CSS Grid и этот показатель постоянно растет.

Скорее всего, 2018 будет годом CSS Grid. Это будет его прорывом и он станет необходимым навыком для front-end разработчика. Точно также как это было с CSS Flexbox несколько лет назад.

Верстаем правильно: знакомство с Flexbox и Grid

Где-то в 2012 или 2013 году я познакомился с веб-разработкой. Постепенно я начал изучать это направление самостоятельно. Вскоре я понял, что CSS придаёт смысл многим вещам, но не создаёт адекватную разметку. Существует столько хаков, что разобраться в них слишком сложно. Вот почему в современных стандартах, о которых пойдет речь в этой статье, работе с разметкой уделили особое внимание.

Что вы узнаете из этой статьи:

• как раньше работали с CSS-разметкой;
• разницу между устаревшими подходами и современными стандартами;
• как начать работу с новыми стандартами (Flexbox и Grid);
• почему вас должны волновать эти современные стандарты.

Как раньше работали с CSS-разметкой

Задача

Давайте смоделируем весьма стандартную задачу: как создать страницу с двумя секциями — боковой панелью и зоной с основным контентом, у которых одинаковая высота, независимо от размера контента?

Вот пример того, к чему мы стремимся:

Боковая панель и зона с основным контентом одинаковой высоты, независимо от размера контента

Для начала я покажу, как решить эту задачу с помощью устаревших подходов.

1. Создаём div с двумя элементами

Очевидно, что в main больше текста.

Выделим aside цветом, чтобы его проще было отличить:

2. Размещаем обе секции рядом

Для этого напишем следующее:

Этот стиль разделяет доступное пространство в необходимых пропорциях и устанавливает float для aside и main .

Два блока, расположенные рядом

Для тех, кто не знаком с float : это относительно старый способ перемещения элементов влево или вправо.

Как видно на изображении выше, задача всё ещё не выполнена — высота боковой панели не совпадает с высотой основной зоны. Исправим это.

3. Используем трюк с display: table

Чтобы решить эту проблему, надо использовать display: table .

Если вы с ним не знакомы, то вот что надо делать:

1. Делаем родительский контейнер (в нашем случае элемент body ) таблицей:
2. Убираем float и делаем дочерние элементы aside и main ячейками таблицы:

Как только мы сделали это, задачу можно считать решенной. По крайней мере, так её решали раньше.

Оба блока теперь одинаковой высоты.

Разница между устаревшими подходами и современными стандартами

Теперь, когда у вас есть представление о том, как проблему решали раньше, давайте взглянем, на что способны Flexbox и Grid.

Flexbox и Grid — это идеальные решения для CSS-разметки, являющиеся современными стандартами. Если вам необходимо писать CSS-код на хорошем уровне, то обязательно изучите их.

Решение задачи с помощью Flexbox

Контекст форматирования Flexbox инициализируется путем создания flex-контейнера.

Родительским элементом является body . Он содержит боковую панель и основную зону. Создаём контейнер:

Flexbox в действии

Не забудем о пропорциях:

Вуаля! Проблему можно считать решенной:

С Flexbox можно делать много разных вещей:

Отцентрировать боковую панель и основную зону по вертикальной оси:

Боковая панель и основной контент отцентрированы по вертикальной оси

Боковая панель отцентрирована по вертикальной оси

Боковая панель теперь размещена после блока с основным контентом

И я затронул лишь верхушку айсберга Flexbox.

Flexbox доступен в большинстве поддерживаемых браузеров. Им можно полноценно пользоваться в Firefox с 28 версии, Chrome с 29, Safari с 6.1 и Edge с 12.

Прим. перев. Разобраться с Flexbox поможет наше наглядное введение. Полезным будет и наше анимированное руководство по CSS flex.

Решение проблемы с помощью Grid

В отличие от Flexbox, который по большей части работает в одном измерении, с CSS Grid вы можете использовать как ряды, так и колонки. Посмотрим, как решить нашу проблему с его помощью.

Начинается всё так же, как и в случае с Flexbox. Создаём контейнер:

И вот что мы получим:

Grid доступен в большинстве поддерживаемых браузеров, хотя и в меньшем количестве. Им можно полноценно пользоваться в Firefox с 52 версии, Chrome с 57, Safari с 10.1 и Edge с 16.

Наше последнее изображение пока никак не отличается от предыдущих. Так в чём же магия?

Что, если мы разделим пропорции ширины, как раньше:

Пропорциональное распределение ширины для дочерних элементов

Да, результат отличается, но нам он не подходит. Боковая панель пока не расположена сбоку от главной зоны.

Вот мы и подошли к сути Grid-разметки. После инициализации Grid-контейнера при помощи display: grid необходимо определить ряды и строки внутри него.

Вот как это делается:

Решение в одну строку — красиво, не правда ли? grid-template-columns определяет пропорции столбцов в сетке.

Но с помощью Grid можно сделать гораздо больше.

Сначала добавим немного цвета главному блоку, чтобы примеры были более наглядными:

Вот что мы должны получить:

Заливка цветом зоны основного контента

Посмотрим, что хорошего может предложить Grid:

Можно определить разрыв между столбцами:

С разрывом между колонками выглядит гораздо опрятней.

Две колонки все еще соответствуют пропорциям 30% / 70%

Добавлен разрыв между строками

Разная высота строк

Для начала хватит и этого — но это далеко не всё.

Как начать работу с новыми стандартами?

Вы увидели пример того, как Flexbox и Grid предоставляют более удобные решения для разметки. Так как начать?

Для начала я рекомендую вам попрактиковаться с примерами из этой статьи. После вы можете начать изучать более сложные случаи. И не забывайте, что Grid пока поддерживается не всеми браузерами. Кроме того, не стоит забывать об адаптивности сайта, подробнее об этом в статье про адаптивную вёрстку.

В качестве практики вас также может заинтересовать игра Flexbox Froggy, которую мы включили в подборку игр для программистов.

Почему вас должны волновать эти стандарты?

Если вы до сих пор не поняли, почему стоит использовать Flexbox и Grid, то вот несколько проблем, с которыми вы можете столкнуться при использовании предыдущих решений:

Когда использовать Flexbox, а когда использовать CSS Grid

Flexbox был представлен в 2009 году как новая технология для облегчения создания адаптивных веб-страниц и более удобной организации элементов на них, и с тех пор он получает все большее и большее распространение. В данный момент он используется как основной инструмент вёрстки для современных веб-страниц.

Flexbox — это одномерная система вёрстки, которую мы можем использовать для установления элементов по оси строки или столбца, что упрощает нашу жизнь при проектировании и создании адаптивных веб-страниц без использования хитрых приемов и множества свойств float и position в наших стилях CSS.

Чтобы начать использовать Flexbox, все, что вам нужно сделать, это создать «гибкий» контейнер с помощью свойства display: flex. После этого каждый элемент, который у вас есть внутри этого гибкого контейнера, превращается в гибкий элемент.

Основное направление, которое наши Flex элементы принимают в контейнере — это строка.

Мы можем легко изменить направление наших Flex элементов в контейнере из строки на столбец, передав свойство: flex-direction: column

У Flexbox есть множество других свойств, которые мы можем использовать для такой работы с элементами, которая с предыдущими технологиями была недоступна или переусложнена — мы можем упорядочить элементы так, как мы хотим, можем изменить порядок элементов, можем определить, должны ли наши элементы увеличиваться или уменьшаться, и т. д.

Например, представим, что у нас есть div элемент, а внутри у div есть три элемента с одинаковой шириной и высотой:

В нашем CSS мы используем Flexbox для упорядочивания и выравнивания наших элементов:

Мы можем легко изменить порядок элементов, используя свойство order. Если бы мы хотели изменить порядок элементов с помощью id #two, мы бы сделали это:

Теперь наш элемент является последним в Flex контейнере. Это некоторые из функций, которые нам предоставил Flexbox, и они очень полезны для стилизации и выравнивания элементов.

Теперь, когда мы знаем, что Flexbox — это система одномерной вёрстки, давайте вкратце разберемся, как работает CSS-Grid и различия между этими системами вёрстки.

CSS Grid

Если Flexbox является мощной системой вёрстки, но она одномерна (это означает, что мы можем работать со строками или столбцами), то CSS Grid на данный момент считается наиболее мощной доступной системой верстки.

CSS Grid — это двумерная система компоновки — мы можем работать со строками и столбцами вместе, а это значит, что она открывает множество различных возможностей для создания более сложного и организованного проектирования веб-страниц, не прибегая к некоторым “банальным способам”, которые мы использовали в прошлом.

Чтобы определить «сетчатый» контейнер, все, что вам нужно сделать, это передать свойство вашему “display: grid” элементу блока. Теперь у вас есть сетка, поэтому вы должны определить, сколько строк и столбцов вы хотите.

Для создания строк вы используете свойство “grid-template-rows” и задаёте их столько раз, сколько хотите, вот так:

grid-template-rows: 200px 200px;

Для создания столбцов — это почти то же самое — мы используем свойство grid-template-columns:

grid-template-columns: 200px 200px;

Но если вы уже знаете, как использовать обе эти системы компоновки, возможно, вам было бы интересно какую из них и в какой ситуации предпочтительнее использовать? Мы рассмотрим это далее.

Теперь, когда мы увидели, как они работают, мы подчеркнем различия и лучшие варианты использования каждого из них.

CSS Grid предназначена для компоновки, Flexbox — для выравнивания.

Еще в то время, когда был выпущен Flexbox, мы думали, что это может быть лучшая система верстки для создания наших веб-страниц, но это было не так.

Flexbox помог разработчикам начать создавать более отзывчивые и удобные в обслуживании веб-приложения, но основная идея одномерной системы компоновки не имеет смысла, когда вам нужно создать вёрстку с более сложным дизайном.

CSS Grid дала нам возможность создавать более сложную вёрстку, используя двумерный способ, используя как строки, так и столбцы. Мы должны стремиться использовать их оба вместе, но для разных целей. Для формирования структуры веб-страницы используйте CSS Grid, для выравнивания элементов используйте Flexbox.

Вы должны рассмотреть возможность использования Flexbox, когда:

1. У вас небольшой проект — Flexbox идеально подходит, когда у вас небольшой дизайн вёрстки для реализации, с несколькими строками или несколькими столбцами;
2. Вам нужно выровнять элементы — Flexbox идеально подходит для этого, единственное, что мы должны сделать, это создать гибкий контейнер, используя display: flex а затем задать направление дочерних элементов, которое мы хотим;
3. Вы создаёте страницу по черновому дизайну — Flexbox — это идеальная система компоновки для создания веб-страниц, если вы точно не знаете, как будет выглядеть ваш контент, поэтому, если вы хотите, чтобы всё просто соответствовало, Flexbox идеально подходит для этого.

Конечно, вы можете создать все свое приложение, используя только Flexbox, и получить тот же результат, как если бы вы создавали с помощью CSS grid, это совершенно нормально. Но для лучшего подхода к CSS, для более краткого, хорошо написанного и удобного в обслуживании приложения в долгосрочной перспективе, для идеального создания и подгонки вашего макета идеальным методом является использование CSS Grid.

CSS Grid лучше, когда:

1. У вас сложный проект — когда у нас есть сложные проекты для реализации, тогда и проявляется магия CSS grid. Система двумерной компоновки здесь идеально подходит для создания вёрстки со сложным дизайном, мы можем использовать ее в наших интересах для создания более сложных и удобных в обслуживании веб-страниц;
2. Вам нужно иметь зазор между элементами блока — еще одна вещь, которая очень полезна в CSS Grid, которой у нас нет во Flexbox, — это свойство gap. Мы можем легко определить разрыв между нашими строками или столбцами, не используя свойство margin, которое может вызвать некоторые побочные эффекты, особенно если мы работаем со многими точками останова;
3. Вам нужно перекрывать элементы — перекрывать элементы с помощью CSS Grid очень просто, вам просто нужно использовать свойства grid-column и grid-row, и вы можете очень легко создавать перекрывающиеся элементы. С другой стороны, с Flexbox нам все еще нужно использовать некоторые хаки, такие как поля, преобразования или абсолютное позиционирование;
4. Вы верстаете по дизайну впервые — когда у вас уже есть структура и дизайн будущей вёрстки, её проще создавать с помощью CSS Grid, и система двумерного макета очень помогает нам, когда мы можем использовать строки и столбцы вместе и располагать элементы так, как мы хотим;

Прежде чем вы решите, какой из них вам следует использовать, не забудьте:

CSS Grid предназначена для верстки, Flexbox — для выравнивания

Вот пример правильного использования CSS Grid, давайте представим, что мы собираемся создать простое приложение, и основные элементы наших приложений будут выглядеть следующим образом:

У нас есть верхний колонтитул, боковое меню, содержимое основного блока и нижний колонтитул. Чтобы создать этот макет с помощью CSS Grid, нам просто нужно создать наши элементы:

А теперь создадим наш сеточный контейнер, используя display: grid, а затем создадим несколько строк и столбцов, например:

Вот и все. Используя только 30 строк CSS, мы создаём наш дизайн очень просто, без необходимости использовать такие хаки, как float или позиционирование наших элементов и без необходимости создавать много гибких контейнеров.

Лучшее решение, которое вы можете принять для своего приложения, чтобы создать очень приличный и хорошо построенный веб-макет для вашего приложения, — это использовать их вместе.

Давайте возьмём наш пример и используем как CSS Grid, так и Flexbox, чтобы показать мощь обеих систем компоновки вместе. Внутри нашего header, мы собираемся создать три div элемента, и мы собираемся выровнять их в ряд.

Для этого всё, что нам нужно сделать, это объявить наш header гибким контейнером с помощью свойства display: flex, указать направление оси как строки (flex-direction: row) и выровнять элементы.

Мощная веб-страница, использующая CSS Grid для верстки и Flexbox для выравнивания.

Для основного стиля макета вы можете использовать CSS Grid, поскольку это двумерная система компоновки, вы можете очень легко работать как со строками, так и со столбцами. А для более простого стиля компоновки вы можете использовать Flexbox, одномерную систему, очень полезную при работе со строками.

Вывод

В этой статье мы узнали о различиях между Flexbox и CSS Grid, о том, как они работают в современных браузерах и как мы можем использовать каждый из них в нашем CSS для достижения различных результатов.