Перечень основных терминов и сборник примеров по технологии css grid.
Обзорная статья по CSS Grid
15.08.2020
Также стоит ознакомиться с записью css grid адаптивная верстка без медиа запросов
Терминология GRID:
Grid line - Линия
Grid Track - Дорожка
Grid Cell - Ячейка
Grid Area - Область
Красным показаны горизонтальные линии 1 и 2, в синим вертикальные 2 и 3:
По аналогии с прошлым примером, красным выделена горизонтальная дорожка №3, а синим вертикальная тоже №3.
Ячейка, это любая клетка ограниченная двумя линиями.
Область, это несколько ячеек образующих прямоугольник.
Управление расположением
Для создания сетки нужно условность свойство display в grid или inline-grid.
Далее нужно указать как должна формироваться структура сетки, для этого используются свойства grid-template-columns и grid-auto-rows.
Их синтаксис довольно прост, рассмотрим его на примере колонок.
Допустим, нам требуется сделать две колонки, у которых первая примерно в два раза больше второй. Тогда нужно перечислить ширину каждой ячейки по очереди:
grid-template-columns: 70% 30%;
- и все, третий элемент автоматически будет перенесен на новую строку.
Специально для сеток css grid появилась новая единица измерения fr (фракция), по своей сути она похожа на проценты, но позволяет более красиво задать отношения между шириной или высотой ячеек.
Если нам, как и в прошлом примере, требуется чтобы одна колонка была в два раза больше второй, то записывается это просто:
grid-template-columns: 2fr 1fr;
Если нам нужно, чтобы первая колонка была маленькой, второй большой и последняя средней, то можно задать такое соотношение:
grid-template-columns: 1fr 3fr 2fr;
Учитывая, что может потребоваться, например, 12 ячеек одинакового размера, то можно использовать функцию повтора. Также ее можно комбинировать с обычными единицами, скажем, если 13 колонка должна быть 50 пикселей:
grid-template-columns: repeat(12, 1fr) 50px;
Также есть функция, позволяющая задать размер ячейки в зависимости от его контента, но не меньше переданного занчения:
grid-template-columns: 1fr fit-content(400px) 1fr;
И еще, не менее удобной и полезной функцией, является minmax, она позволяет задать минимальный и максимальный размер ячейки:
grid-auto-rows: minmax(150px, auto);
Со строками все тоже самое, но стоит обратить внимание на термин "Неявная сетка".
Проще его понять на примере, допустим у нас задана ширина для двух колонок и высота для 3 рядов:
grid-template-columns: 2fr 1fr; grid-template-rows: repeat(3, 1fr);
тогда первые 6 ячеек будут расположены как указано, но что будет с 7 и последующими?
Они пойдут новым и рядами, но их высота будет выставлена в auto (значение по умолчанию) и как раз они будут считаться как элементы неявной сетки.
Это далеко не всегда удобно, поэтому существует свойство grid-auto-rows, оно позволяет выставить значения таким элементам сетки.
Пример общего кода:
.grid {
display: grid;
/*
grid-template-columns: 70% 30%;
grid-template-columns: 2fr 1fr;
*/
grid-template-columns: repeat(3, 1fr) 2fr;
/*
Высота всех блоков:
grid-auto-rows: 150px;
*/
grid-auto-rows: minmax(150px, auto);
}
Также можно ознакомиться с несколькими примерами, например, с тем, что можно внутри одной сетки расположить другую (вложенную) сетку или с тем, как ячейки могут накладываться друг на друга.
Grid template
Шаблоны сетки позволяют "визуально описать" какие области и как буду отображены на экране.
Допустим, нам нужно сделать заготовку для стандартного шаблона:
шапка - занимающая все пространство
контент и сайд бар - две неравных колонки занимающие всю строку
подвал - как и шапка, занимает все пространство
Для этого нужно задать ячейкам имена, через свойство grid-area:
.header {
grid-area: header;
}
а затем описать как эти области будут выведены, используя grid-template-areas:
grid-template-areas: "header header"
"main side"
"footer footer"
;
HTML структура:
<div class="grid">
<div class="header">Header</div>
<div class="footer">Footer</div>
<div class="side">Side</div>
<div class="main">
Lorem ipsum
</div>
</div>
Полный css код:
.header {
grid-area: header;
}
.footer {
grid-area: footer;
}
.side {
grid-area: side;
}
.main {
grid-area: main;
}
.grid {
display: grid;
grid-template-areas: "header header"
"main side"
"footer footer"
;
grid-template-columns: 2fr 1fr;
}
Стоит отметить, что одна область может занимать не только несколько ячеек в ряду, но и несколько ячеек в колонке:
grid-template-areas: "header side"
"main side"
"footer footer"
;
но изогнуть область нельзя, она всегда должна оставаться прямоугольной.
Если же требуется оставить какие-то ячейки пустыми, то можно прописать в них любое несуществующее имя, например, none
Боевая демонстрация.
Короткой записью для grid-template-areas и grid-template-columns, является grid-template:
.grid {
display: grid;
grid-template: "header side"
"main side"
"footer footer"
/ 2fr 1fr;
}
Размещение ячеек и областей внутри сетки
grid-area позволяет задать с какой линии по какую будет занимать область.
grid-area, это короткая запись для свойств:
grid-column-start
grid-column-end
grid-row-start
grid-row-end
При этом стоит обратить внимание на порядок их перечисления:
grid-area: 1 / 2 / 3 / 4;
grid-row-start: 1;
grid-column-start: 2;
grid-row-end: 3;
grid-column-end: 4;
Предположим, что нам нужно растянуть одну ячейку на всю ширину сетки:
Тогда мы можем явно задать с какой по какую линию колонок должна занимать область:
.c0 {
grid-column: 1 / 7;
}
Другой вариант, можно задать на сколько линий нужно расшириться, для этого используется span:
.c0 {
grid-column-end: span 6;
}
Также стоит отметить, что необязательно конечная позиция должна быть больше начальной, пример вполне валидной записи:
.c0 {
grid-column-start: 5;
grid-column-end: 2;
}
Также есть еще одна отличная возможность - задавать имена определенным линиям:
.grid {
display: grid;
grid-template-columns: [col_start] 1fr 1fr 1fr [col_middle] 1fr 1fr 1fr [col_end];
grid-template-rows: [row_start] 1fr 1fr [row__middle] 1fr 1fr [row_end];
grid-gap: 1em;
}
.c0 {
grid-column: col_start / col_end;
}
Несколько примеров для наглядности.
Выравнивание и позиционирование
Ориентация сетки:
Свойство grid-auto-flow позволит указать как стоить таблицу (по аналогии со свойством flex-direction для flexbox).
Доступные значения:
row - значение по умолчанию, новые ячейки заполняют каждую строку поочередно, добавляя новые строки по мере необходимости.
column - соответственно, сначала заполняются строки.
dense - алгоритм пытается распределить ячейки так, что бы они занимали минимальное место.
Выравнивание строк / столбцов:
justify-items - горизонтальное выравнивание столбцов сетки.
align-items - вертикальное выравнивание рядов сетки.
Также есть можно использовать place-items, для краткой записи:
place-items: "align-items justify-items";
Выравнивание отдельной ячейки:
justify-self - горизонтальное положение ячейки внутри сетки.
align-self - вертикальное положение.
краткая запись:
place-items: "align-self justify-self";
Выравнивание контента внутри ячейки:
Внимание: учитывая, что свойство display: grid не наследуется, для самой ячейки его тоже нужно явно задать.
Свойства работают по аналогии:
justify-content
align-content
Если нужно разместить содержимое ячейки по центру, то можно использовать:
.grid > .c5 {
margin: auto;
}
- тогда не требуется задавать display: grid
Живая демонстрация примеров.
Отствупы:
Если нужно задать отступы между ячейками, что вместо margin стоит использовать grid-gap:
.grid {
grid-template-columns: repeat(8, 1fr);
grid-gap: 1em;
}
"Рецепты"
space-around
У Flexbox, из коробки, есть красивое поведение при использовании
justify-content: space-around;
У Grid такого же эффекта можно добиться так:
display: grid; grid-template-columns: repeat(4, 50px); justify-items: center; justify-content: space-around;
Основной момент, это ограничение ширины ячеек через grid-template-columns, без этого ячейки растягиваются (stretch) на всю ширину и justify-content: space-around; визуально ничего не меняет.