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

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

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

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

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

<div class="flex-wrapper">   <div id="one">Header</div>   <div id="two">Nav</div>   <div id="three">Content</div>     <div id="four">Footer</div> </div>

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

.flex-wrapper {    display: flex;  } 

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

.flex-wrapper{    display: flex;    background-color: beige;  }  .flex-wrapper > div {    background-color: green;    height: 100px;    width: 100px;    margin: 10px;  } 

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

.flex-wrapper > div {    flex-grow: 1;  }

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

#one{    flex-grow: 10; }  /* таким образом первый div-элемент станет на 10 единиц больше остальных */

FLEX-DIRECTION

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

.flex-wrapper{    display: flex;    flex-direction: row; /* направление по умолчанию */  } .flex-wrapper{    display: flex;    flex-direction: row-reverse;   }

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

.flex-wrapper{    display: flex;    flex-direction: column;  } 

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

.flex-wrapper{    display: flex;    flex-direction: column-reverse;  }

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

FLEX BASIS

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

#three {    flex-basis: 200px;  }

FLEX

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

.flex-wrapper {    display: flex;    flex: 0 0 200px;  } 

JUSTIFY-CONTENT И ALIGN-SELF

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

.flex-wrapper {    display: flex;    flex: 0 0 200px;    justify-content: center;    align-items: center;  } 

CSS GRID Layout

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

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

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

<div class="container">    <div id="one">Header</div>    <div id="two">Nav</div>    <div id="three">Content</div>     <div id="four">Aside</div>      <div id="five">Section</div>     <div id="six">Footer</div>  </div>  .container {    display: grid;  } 

GRID TEMPLATE-COLUMNS И GRID-TEMPLATE-ROWS

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

.container {    display: grid;    grid-template-columns:  40px 1fr 20%;     grid-template-rows: 200px;    background-color: beige;    } .container > div {    background-color: green;    margin: 10px;  } 

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.

FR

.container {    display: grid;    grid-template-columns: 16.7% 16.7% 16.7% 16.7% 16.7% 16.7%;   } 

Присвоив 16,7% для 6 точек, я успешно разделил шесть элементов контейнера по шести равным частям экрана. Значение 16,7% я выбрал, потому что при умножении 16,7 на 6 как раз получится 100% ширины экрана.
Использование процентов и пикселей работает идеально, но им недостает гибкости, и они уступают наиболее эффективному компоненту – долям CSS сетки.
Fr – это дробная единица, которая присваивает каждому элементу одну долю доступного пространства, которое можно увеличивать, выделяя под div необходимую ему область.

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

grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr; 

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

grid-template-columns: 1fr 2fr 1fr 2fr 1fr 1fr; 

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

ФУНКЦИЯ REPEAT

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

.container {    display: grid;    grid-template-columns: repeat(6, 1fr); }

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

GAP

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

gap: 10px;

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

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

.container {    display: grid;    grid-template-columns: repeat (3, 1fr);    grid-template-rows: repeat(4, 200px);  } #one {    grid-column-start: 1;    grid-column-end: 3;    grid-row-start: 1;    grid-row-end: 4;  }

Если вы присвоите указанные значения первому 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. В качестве значений в этом случае через слэш указываются начальные и конечные позиции элемента:

#one {    grid-column: 1/3;    grid-row: 1/4;  }

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

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

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

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

<div class="container">    <div id="one">Image One</div>    <div id="two">Image Two</div>    <div id="three">Image Three</div>     <div id="four">Image Four</div>      <div id="five">Image Five</div>     <div id="six">Image Six</div>    <div id="seven">Image Seven</div>    <div id="eight">Image Eight</div>    <div id="nine">Image Nine</div>  </div> .container{    display: grid;    grid-template-columns: repeat(3, 1fr);     grid-template-rows: repeat(3, 200px);    background-color: beige;    gap: 10px  } .container > div {    background-color: green;  } 

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

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

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

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

.container {    display: grid;    grid-template-columns:  repeat(3, 1fr);     grid-template-rows: repeat(5, 200px);    background-color: beige;    gap: 10px;  } .container > div {    background-color: green;  } #one {    grid-column: 1/3;    grid-row: 1/4;  }  #two {   grid-row: 1/3;  }   #five {    grid-column: 4/2;  }    #seven {    grid-row: 6/1;  }

Макет Masonry

GRID TEMPLATE AREAS

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

<div class="container">   <div id="one">Header</div>    <div id="two">Nav</div>    <div id="three">Aside</div>     <div id="four">Content</div>      <div id="five">Section</div>     <div id="six">Footer</div> </div> .container {    display: grid;    grid-template-columns:  repeat(3, 1fr);     grid-template-rows: repeat(2,100px);    background-color: beige;    gap: 10px;    grid-template-areas: 'header header header'                         'nav nav nav'                         'aside content content'                         'aside section section'                         'footer footer footer';  } .container > div {    background-color: green;    font-size: 40px;  }    #one {    grid-area: header;  }  #two {   grid-area: nav;  } #three {    grid-area: aside;  }      #four {    grid-area: content;  }  #five {    grid-area: section;  }     #six {    grid-area: footer;  }

GRID AREAS

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

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

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