Построение сетки на флексах и гридах

В прошлом, до появления флексбоксов и гридов, сетки на странице создавались с помощью свойства float или таблиц.

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

CSS Flex Layout ориентирован на одну ось, то есть флексами удобно делать или колонки, или ряды элементов. При этом флексбокс позволяет управлять шириной каждой колонки и отступами между ними. Но одновременно двумя направлениями во флексбоксе управлять сложно.

Пример CSS Flex Layout

CSS Grid Layout оптимизирован для двухмерных макетов: тех, в которых нужно управлять выравниванием содержимого в обоих измерениях.

Пример CSS Grid Layout

По сути грид — это сетка, таблица. В гриде можно управлять размерами одновременно и рядов, и столбцов сетки. «Ячейкам» грида можно задавать ширину и высоту, управлять отступами между ними. Размеры могут быть фиксированными или рассчитываться динамически.

Основные преимущества гридов — простота, применимость для адаптивной вёрстки и экономичность. Технология гридов позволяет выстраивать объекты в двухмерную сетку с малым количеством дополнительных обёрток, позволяет сократить количество строк кода и таким образом сократить время и стоимость разработки.

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

Очень простой сайт, хедер, контент и футер Сложная плиточная структура, которую возможно сделать на чистом CSS только с помощью гридов

Очень сложные сетки, с перекрытиями и весьма неочевидными «плиточными» дизайнами, делаются на гридах довольно прозрачно и легко, ведут себя абсолютно предсказуемо, не требуют решения задач по визуальному отображению, которые по сути своей являются фронтендными, на бэкенде или с использованием тяжёлых JS- или CSS-фреймворков — потому что сами гриды являются своего рода фреймворком, лёгким и быстрым.

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

Модульные сетки

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

А в мире традиционной книжной и журнальной вёрстки уже очень давно существует понятие модульной сетки.

Что такое модульная сетка?

Разберём на примере. Откройте любую бумажную книгу. Видите текст, проходящий через всю ширину страницы, исключая поля? Так вот, перед вами типичная одноколоночная вёрстка.

Типичная книжная одноколоночная вёрстка

А теперь загляните в журнал или газету. В журнале информация традиционно разделена на две колонки, а в газете — на три-четыре, а то и больше.

Пример довольно типичной для газет и журналов вёрстки в три колонки с шапкой

Дизайн сайтов довольно много разных «фишек» унаследовал от полиграфического дизайна — правила композиции, типографику, а также модули и сетку. Модульная сетка в веб-дизайне представляет собой единую схему расположения всех элементов и блоков сайта. Этот каркас проходит через все страницы и помогает создать визуальный порядок. По сетке проще располагать элементы, определять расстояния между ними, создавать композиции.

Про модульные сетки в графических редакторах

Когда мы говорим про модульные сетки применительно к сайтам, то прежде всего мы имеем в виду «колоночную систему», то есть когда вёрстку «укладывают» в определённое число ритмично повторяющихся вертикальных полос.

К примеру, сайты-визитки и сайты-презентации зачастую вписываются в одноколоночную структуру, а домашние страницы — в двухколоночную.

Сайт-визитка, одноколоночный макет

Более сложные информационные проекты, соответственно, имеют более сложный и продуманный макет. Двенадцатиколоночный макет считается стандартным и классическим, под него разработаны многие «системы» сеток — шаблонные решения, позволяющие за счёт готового кода сократить объём работы. Однако бывает, что колонок меньше или больше, например, у the Village их бывает как 12, так и 6.

Макет двенадцатиколоночного сайта с выведенной модульной сеткой

Подробнее про 12 колонок

В отличие от полиграфического дизайна, сетка в веб-дизайне может быть не только фиксированной, но и динамической. К примеру, вы можете сделать одну или несколько колонок макета растягиваемыми, «резиновыми», задав их ширину в процентах или других относительных единицах, а размер остальных колонок зафиксировать.

Размеры гридов можно фиксировать или нет

До этого момента мы говорили только о «колонках» в сетке. С появлением гридов появилась возможность делать без усложнения не только «колонки», но ещё одновременно и «ряды». То есть с помощью обычного CSS теперь можно сделать по-настоящему двухмерную модульную сетку.

Сетка стала двухмерной

Сейчас гриды перестали быть новинкой, имеют довольно хорошую поддержку, работают почти во всех браузерах (даже в IE, хотя и с некоторыми условностями). Появились настоящие живые сайты, сделанные на гридах, и это не только сайты стартапов и конференций разработчиков, но и ресурсы вроде Behance или the Village (на the Village гридами свёрстаны некоторые статьи). Получается, что эта технология становится не просто полезной и интересной, но и необходимой в работе.

Давайте изучим, как работают гриды.

Теория~ 10 минут

Глава 6.2.2. Описание сетки

Когда вы применяете display: grid; к какому-либо элементу, грид, или сетка, начинает «влиять» только на непосредственных потомков этого элемента. Получается, что гридом будут управляться все элементы только первого уровня вложенности.

Схема и термины грида

Пример: отображение грида задано для <body>, он становится грид-контейнером, а все вложенные элементы — грид-элементами.

.grid {

display: grid;

/* теперь секции первого уровня вложенности внутри — грид-элементы */

 

width: 400px;

height: 400px;

}

<div class="grid">   <!-- это грид-контейнер -->

<header class="header"> <!-- это грид-элемент -->

<nav>             <!-- это уже не грид-элемент -->

</nav>

</header>

 

<main class="main"> <!-- это грид-элемент -->

</main>

 

<aside class="aside"> <!-- и это грид-элемент -->

</aside>

 

<footer class="footer"> <!-- и это тоже грид-элемент -->

</footer>

</div>

Иногда вместо «контейнер» и «элемент» говорят, что один элемент становится «грид-родителем» для всех непосредственных элементов внутри себя, то есть они становятся «грид-детьми».

Итак, мы задали сетку, которая определила грид-родителя и детей, что дальше?

Давайте взглянем, как эту сетку отрисовал браузер:

Мы подкрасили разделы, чтобы их было виднее

Мы видим грид-элементы, которые расположены рядами друг под другом — так их автоматически расставил грид. Грид распределил всю доступную ширину и высоту равномерно между элементами.

Всего в гриде создалось четыре ряда. Горизонтальные линии между рядами грида называются грид-линиями — они нумеруются по порядку от начала грида к концу. Первый ряд находится между грид-линиями 1 и 2, второй ряд — между линиями 2 и 3 и так далее.

Также в нашем гриде есть столбец, он пока что один. Столбец находится между вертикальными грид-линиями: всего сейчас две вертикальных линии — 1 и 2.

Заметьте, что сейчас каждый грид-элемент автоматически занял одну ячейку в общей сетке. Все ячейки по умолчанию имеют «высоту» одного ряда и «ширину» одного столбца.

Количеством рядов и столбцов грида мы можем явно управлять.

Для этого существуют свойства grid-template-columns и grid-template-rows. Эти свойства перечисляют количество и размер будущих столбцов и рядов грида.

Давайте зададим гриду четыре ряда высотой 100px и четыре столбца шириной 100px. Для этого просто перечислим через пробел размеры в пикселях:

.grid {

display: grid;

 

grid-template-columns: 100px 100px 100px 100px;

grid-template-rows: 100px 100px 100px 100px;

 

width: 400px;

height: 400px;

}

Вот получившаяся сетка: 4 ряда и 4 столбца образуют 16 ячеек — в каждом ряду и столбцу по 4 ячейки:

Сетка и блоки в ней

Как видно на иллюстрации, каждый грид-элемент по-прежнему занимает одну ячейку общей сетки. Поэтому наши грид-элементы разложились в порядке появления в разметке в ячейки первого ряда начиная с начала сетки: header — в первой ячейке, main — во второй и так далее.

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

Давайте разберёмся, как это сделать. Для этого подробнее поговорим про грид-линии.

Итак, у нашей сетки есть 4 столбца и 4 ряда. Получается, что у нас есть 5 вертикальных грид-линий, которые определяют столбцы, и 5 горизонтальных грид-линий, формирующих ряды. Грид-линии нумеруются от начала грида к концу. То есть по умолчанию вертикальные линии считаются слева направо, а горизонтальные — сверху вниз. В обратную сторону, то есть справа налево и снизу вверх, грид-линии нумеруются отрицательными значениями.

Первая линия будет соответственно перед первым столбцом, после первого столбца будет линия 2 и так далее; последняя (самая правая) линия будет -1, вторая справа — -2.

Вывели линии с отрицательными значениями

Вернёмся к заданию координат грид-элементов. Сделать это можно с помощью свойств grid-column-start и grid-column-end для определения координат «по столбцам» и grid-row-start и grid-row-end — для координат «по рядам». В качестве значения свойств указывается номер определённой грид-линии, например:

{

grid-column-start: 1; /* элемент начинается с первой линии колонок */

grid-column-end: 3; /* элемент заканчивается на третьей линии колонок */

 

grid-column: 1 / 3; /* более короткая запись */

 

grid-row-start: 2; /* элемент начинается со второй линии рядов */

grid-row-end: 4; /* элемент заканчивается на четвёртой линии рядов */

 

grid-row: 2 / 4; /* более короткая запись */

}

Перейдём к нашей раскладке страницы. Давайте зададим «координаты», по которым будет располагаться грид-элемент.header. Мы хотим, чтобы элемент начинался с первой грид-линии столбцов и заканчивался на третьей линии:

.header {

grid-column-start: 1; /* элемент начинается с первой линии */

grid-column-end: 3; /* элемент заканчивается на третьей линии */

 

grid-column: 1 / 3; /* более короткая запись */

}

Вот что получилось:

Первый блок занял две ячейки

А можно было использовать span. Кодовое слово span в CSS Grid означает количество ячеек в любом направлении, которое займёт элемент:

.header {

grid-column: 1 / span 2; /* начиная с первой грид-линии займёт две ячейки */

}

Итак, какие варианты указания координат у нас есть:

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

· или количество ячеек, которые займёт элемент.

Запишем одно и то же обозначение координат для элемента, который займёт все 4 столбца сетки из 4.

.header {

grid-column: 1 / 5; /* с первой грид-линии до пятой */

grid-column: 1 / -1; /* с первой грид-линии до последней */

grid-column: 1 / span 4; /* с первой грид-линии следующие четыре ячейки */

}

Хедер занял весь первый ряд

Ценность записи вида grid-column: 1 / -1; в том, что не нужно высчитывать количество линий, а в случае динамического наполнения (когда количество столбцов или строк меняется) сетка не сломается, а по-прежнему будет доходить до конца строки или столбца.

Давайте теперь попробуем определить координаты элемента.main так, чтобы он занимал три столбца (c линии 1 по 4) и два ряда (с линии 2 по -2). Код будет такой:

.main {

grid-column: 1 / 4;

grid-row: 2 / -2;

}

Получившийся грид:

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

Псевдоэлементы как грид-элементы

Если у грид-контейнера есть псевдоэлементы::before и::after, которые включены в поток (им не задано абсолютное позиционирование), то они тоже становятся грид-элементами.

Пример:

<p class="grid">

content

</p>

.grid {

display: grid;

 

grid-template-columns: 100px 100px 100px;

grid-template-rows: 50px;

 

width: 300px;

}

 

.grid::before {

content: "before";

}

 

.grid::after {

content: "after";

}

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

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

 

 

Теория~ 2 минуты