CSS Grid Layout // «Фрилансер по жизни»
Полезные ссылки
ВНИМАНИЕ! Шпаргалка будет дорабатываться по мере развития технологии.
Варианты объявления grid-контейнера
Свойство display
Контейнер-сетка бывает двух видов: обычный display: grid и встроенный display: inline-grid. Первый генерирует grid-контейнер уровня блока, второй — grid-контейнер уровня строки.
1
2
3
4
5
6
Грид-контейнер определяется как блочный элемент.
CSS код:
.grid{
background-color: #eee; display: grid;}
.grid__item{
background-color: #5e5373; border: 1px dashed #ece89d; padding: 10px; color: #fff; font-size: 20px; font-weight: 700;}
1
2
3
4
5
6
Грид-контейнер определяется как блочно-строчный элемент.
CSS код:
.grid{
background-color: #eee; display: inline-grid;}
.grid__item{
background-color: #5e5373; border: 1px dashed #ece89d; padding: 10px; color: #fff; font-size: 20px; font-weight: 700;}
Определение явной сетки
Свойства: grid-template-rows, grid-template-columns, grid-template, grid-template-areas
Количество строк / столбцов определяется с помощью свойств grid-template-rows и grid-template-columns. Свойства не наследуются.
Каждый идентификатор сетки в значении grid-template-areas соответствует ячейке сетки. Как только все ячейки идентифицированы, браузер объединяет все смежные ячейки с одинаковыми именами в одну область, которая охватывает все их, при условии, что они описывают область прямоугольной формы. Если вы попытаетесь настроить более сложные области, весь шаблон будет недействительным и области сетки не будут определены.
1
2
3
4
5
6
fr — единица длины, которая позволяет создавать гибкие дорожки. Не является единицей измерения в обычном ее понимании, поэтому не может быть представлена или объединена с другими типами единиц в выражениях calc(). Общий размер фиксированных строк или столбцов вычитается из доступного пространства контейнера-сетки. Оставшееся пространство делится между строками и столбцами с гибкими размерами пропорционально их коэффициенту.
CSS код:
.grid{
background-color: #eee; display: grid; grid-template-columns: 1fr 1fr 1fr; grid-template-rows: 1fr 1fr;}
Или:
.grid{
background-color: #eee; display: grid; grid-template: 1fr 1fr / 1fr 1fr 1fr;}
.grid__item{
background-color: #5e5373; border: 1px dashed #ece89d; padding: 10px; color: #fff; font-size: 20px; font-weight: 700;}
1
2
3
4
5
6
Размеры в % вычисляются от ширины или высоты контейнера-сетки.
CSS код:
.grid{
background-color: #eee; display: grid; grid-template-columns: 20% 30% 20%; grid-template-rows: 80% 120%;}
Или:
.grid{
background-color: #eee; display: grid; grid-template: 80% 120% / 20% 30% 20%;}
.grid__item{
background-color: #5e5373; border: 1px dashed #ece89d; padding: 10px; color: #fff; font-size: 20px; font-weight: 700;}
1
2
3
4
5
6
Функция minmax(min,max) определяет диапазон размеров, больше или равный min и меньше или равный max. Если max < min, то max игнорируется, а minmax(min,max) обрабатывается как min. Значения в fr можно устанавливать только как максимальное.
CSS код:
.grid{
background-color: #eee; display: grid; grid-template-columns: minmax(200px,300px) minmax(100px,200px) minmax(250px,150px); grid-template-rows: minmax(100px,110%) minmax(50px,1fr);}
Или:
.grid{
background-color: #eee; display: grid; grid-template: minmax(100px,110%) minmax(50px,1fr) / minmax(200px,300px) minmax(100px,200px) minmax(250px,150px);}
.grid__item{
background-color: #5e5373; border: 1px dashed #ece89d; padding: 10px; color: #fff; font-size: 20px; font-weight: 700;}
1
2
3
4
5
6
Значение auto ориентируется на содержимое элементов сетки одной дорожки. Как минимум, рассматривается как минимальный размер элемента сетки, как определено min-width или min-height. Как максимум, обрабатывается так же, как и max-content. Может растягиваться за счет свойств align-content и justify-content.
CSS код:
.grid{
background-color: #eee; display: grid; grid-template-columns: auto 1fr auto; grid-template-rows: auto 1fr;}
Или:
.grid{
background-color: #eee; display: grid; grid-template: auto 1fr / auto 1fr auto;}
.grid__item{
background-color: #5e5373; border: 1px dashed #ece89d; padding: 10px; color: #fff; font-size: 20px; font-weight: 700;}
1
2
3
4
5
6
Нотация repeat() представляет повторяющийся фрагмент списка дорожек, что позволяет записать в более компактной форме большое количество одинаковых по размерам столбцов или строк.
CSS код:
.grid{
background-color: #eee; display: grid; grid-template-columns: repeat(3,1fr); grid-template-rows: repeat(2,1fr);}
Или:
.grid{
background-color: #eee; display: grid; grid-template: repeat(2,1fr) / repeat(3,1fr);}
.grid__item{
background-color: #5e5373; border: 1px dashed #ece89d; padding: 10px; color: #fff; font-size: 20px; font-weight: 700;}
1
2
3
4
5
6
Используя значение auto-fill, вы всегда получите хотя бы один столбец, даже если он по какой-то причине не помещается в контейнер-сетку.
CSS код:
.grid{
background-color: #eee; display: grid; grid-template-columns: repeat(auto-fill,minmax(150px, 1fr));}
Или:
.grid{
background-color: #eee; display: grid; grid-template: auto / repeat(auto-fill,minmax(150px, 1fr));}
.grid__item{
background-color: #5e5373; border: 1px dashed #ece89d; padding: 10px; color: #fff; font-size: 20px; font-weight: 700;}
1
2
3
4
5
6
Если вы используете auto-fit, то дорожки, которые не содержат элементы сетки, будут сброшены.
CSS код:
.grid{
background-color: #eee; display: grid; grid-template-columns: repeat(auto-fit,minmax(150px, 1fr));}
Или:
.grid{
background-color: #eee; display: grid; grid-template: auto / repeat(auto-fit,minmax(150px, 1fr));}
.grid__item{
background-color: #5e5373; border: 1px dashed #ece89d; padding: 10px; color: #fff; font-size: 20px; font-weight: 700;}
1
2
3
4
5
6
Свойство grid-template-areas определяет именованные области сетки, которые не связаны с каким-либо конкретным элементом сетки, но на которые можно ссылаться из свойств размещения сетки. Синтаксис свойства обеспечивает визуализацию структуры сетки, облегчая понимание общего макета контейнера-сетки. Свойство не наследуется.
CSS код:
.grid{
background-color: #eee; display: grid; grid-template-columns: 150px 1fr; grid-template-areas: 'header header' 'sidebar content' 'block-1 block-2' 'footer footer';}
Или:
.grid{
background-color: #eee; display: grid; grid-template: auto / 150px 1fr; grid-template-areas: 'header header' 'sidebar content' 'block-1 block-2' 'footer footer';}
.grid__item{
background-color: #5e5373; border: 1px dashed #ece89d; padding: 10px; color: #fff; font-size: 20px; font-weight: 700;}
.grid__item:nth-child(1){
grid-area: header;}
.grid__item:nth-child(2){
grid-area: sidebar;}
.grid__item:nth-child(3){
grid-area: content;}
.grid__item:nth-child(4){
grid-area: block-1;}
.grid__item:nth-child(5){
grid-area: block-2;}
.grid__item:nth-child(6){
grid-area: footer;}
Определение неявной сетки
Свойства: grid-auto-columns, grid-auto-rows, grid-auto-flow
Если элемент сетки расположен в строке или столбце, размер которых не определен явно grid-template-rows или grid-template-columns, создаются неявные дорожки сетки для его хранения. Это может произойти в случае, если строка или столбец оказались за пределами установленных размеров сетки.
Элементы сетки, которые не размещены явно, автоматически помещаются в незанятое пространство в контейнере-сетке с помощью алгоритма автоматического размещения. Свойство grid-auto-flow управляет автоматическим размещением элементов сетки без явного положения. После заполнения явной сетки (или если явной сетки нет) автоматическое размещение также приведет к генерации неявных дорожек сетки. Свойство не наследуется.
1
2
3
4
5
6
По умолчанию эти автоматически добавляемые дорожки имеют минимальный необходимый размер. Свойства grid-auto-rows и grid-auto-columns позволяют контролировать размер неявных дорожек сетки. Если дано несколько размеров дорожек, шаблон повторяется по мере необходимости, чтобы найти размер неявных дорожек. Первая неявная дорожка сетки после явной сетки получает первый заданный размер и так далее. Свойства не наследуются.
CSS код:
.grid{
background-color: #eee; display: grid; grid-template: 1fr / repeat(3,200px); grid-auto-columns: 50px; grid-auto-flow:column;}
.grid__item{
background-color: #5e5373; border: 1px dashed #ece89d; padding: 10px; color: #fff; font-size: 20px; font-weight: 700;}
1
2
3
4
5
6
По умолчанию эти автоматически добавляемые дорожки имеют минимальный необходимый размер. Свойства grid-auto-rows и grid-auto-columns позволяют контролировать размер неявных дорожек сетки. Если дано несколько размеров дорожек, шаблон повторяется по мере необходимости, чтобы найти размер неявных дорожек. Первая неявная дорожка сетки после явной сетки получает первый заданный размер и так далее. Свойства не наследуются.
CSS код:
.grid{
background-color: #eee; display: grid; grid-template: 1fr / repeat(3,200px); grid-auto-rows: 100px;}
.grid__item{
background-color: #5e5373; border: 1px dashed #ece89d; padding: 10px; color: #fff; font-size: 20px; font-weight: 700;}
1
2
3
4
5
6
Алгоритм автоматического размещения размещает элементы, заполняя каждую строку по очереди слева-направо (для LTR-языков), добавляя новые строки по мере необходимости. Значение по умолчанию.
CSS код:
.grid{
background-color: #eee; display: grid; grid-template: 1fr / repeat(3,200px); grid-auto-flow: row;}
.grid__item{
background-color: #5e5373; border: 1px dashed #ece89d; padding: 10px; color: #fff; font-size: 20px; font-weight: 700;}
1
2
3
4
5
6
Алгоритм размещает элементы, заполняя каждый столбец по очереди сверху-вниз, добавляя новые столбцы по мере необходимости.
CSS код:
.grid{
background-color: #eee; display: grid; grid-template: 1fr 1fr / repeat(3,200px); grid-auto-flow: column;}
.grid__item{
background-color: #5e5373;border: 1px dashed #ece89d; padding: 10px; color: #fff; font-size: 20px; font-weight: 700;}
1
2
3
4
5
6
Алгоритм "плотной" укладки элементов. При необходимости может менять порядок следования элементов, заполняя пустые места более крупными элементами.
CSS код:
.grid{
background-color: #eee; display: grid; grid-template: 1fr 1fr / repeat(3,200px); grid-auto-flow: dense;}
.grid__item{
background-color: #5e5373; border: 1px dashed #ece89d; padding: 10px; color: #fff; font-size: 20px; font-weight: 700;}
Выравнивание содержимого вдоль горизонтальной оси
Свойство: justify-items
Выравнивает содержимое вдоль оси строки (в отличии от align-items который выравнивает элементы вдоль вертикальной оси). Это значение применяется ко всем элементам сетки внутри контейнера. Свойство не наследуются.
1
2
3
4
5
6
Заполняет всю ширину области (по умолчанию).
CSS код:
.grid{
background-color: #eee; display: grid; grid-template: repeat(2,100px) / repeat(3,1fr); justify-items: stretch;}
.grid__item{
background-color: #5e5373; border: 1px dashed #ece89d; padding: 10px; color: #fff; font-size: 20px; font-weight: 700;}
1
2
3
4
5
6
Выравнивает содержимое по левой стороне области.
CSS код:
.grid{
background-color: #eee; display: grid; grid-template: repeat(2,100px) / repeat(3,1fr); justify-items: start;}
.grid__item{
background-color: #5e5373; border: 1px dashed #ece89d; padding: 10px; color: #fff; font-size: 20px; font-weight: 700;}
1
2
3
4
5
6
Выравнивает содержимое по правой стороне области.
CSS код:
.grid{
background-color: #eee; display: grid; grid-template: repeat(2,100px) / repeat(3,1fr); justify-items: end;}
.grid__item{
background-color: #5e5373; border: 1px dashed #ece89d; padding: 10px; color: #fff; font-size: 20px; font-weight: 700;}
1
2
3
4
5
6
Выравнивает содержимое по центру области.
CSS код:
.grid{
background-color: #eee; display: grid; grid-template: repeat(2,100px) / repeat(3,1fr); justify-items: center;}
.grid__item{
background-color: #5e5373; border: 1px dashed #ece89d; padding: 10px; color: #fff; font-size: 20px; font-weight: 700;}
Выравнивание содержимого вдоль вертикальной оси
Свойство: align-items
Выравнивает содержимое вдоль вертикальной оси (в отличии от justify-items который выравнивает элементы вдоль горизонтальной оси). Это значение применяется ко всем элементам сетки внутри контейнера. Свойство не наследуются.
1
2
3
4
5
6
Заполняет всю ширину области (по умолчанию).
CSS код:
.grid{
background-color: #eee; display: grid; grid-template: repeat(2,100px) / repeat(3,1fr); align-items: stretch;}
.grid__item{
background-color: #5e5373; border: 1px dashed #ece89d; padding: 10px; color: #fff; font-size: 20px; font-weight: 700;}
1
2
3
4
5
6
Выравнивает содержимое по верхней стороне области.
CSS код:
.grid{
background-color: #eee; display: grid; grid-template: repeat(2,100px) / repeat(3,1fr); align-items: start;}
.grid__item{
background-color: #5e5373; border: 1px dashed #ece89d; padding: 10px; color: #fff; font-size: 20px; font-weight: 700;}
1
2
3
4
5
6
Выравнивает содержимое по нижней стороне области.
CSS код:
.grid{
background-color: #eee; display: grid; grid-template: repeat(2,100px) / repeat(3,1fr); align-items: end;}
.grid__item{
background-color: #5e5373; border: 1px dashed #ece89d; padding: 10px; color: #fff; font-size: 20px; font-weight: 700;}
1
2
3
4
5
6
Выравнивает содержимое по центру области.
CSS код:
.grid{
background-color: #eee; display: grid; grid-template: repeat(2,100px) / repeat(3,1fr); align-items: center;}
.grid__item{
background-color: #5e5373; border: 1px dashed #ece89d; padding: 10px; color: #fff; font-size: 20px; font-weight: 700;}
Выравнивание сетки вдоль горизонтальной оси
Свойство: justify-content
Выравнивает сетку вдоль горизонтальной оси (в отличии от align-content который выравнивает сетку вдоль вертикальной оси). Свойство не наследуются.
1
2
3
4
5
6
Выравнивает сетку по левой стороне контейнера.
CSS код:
.grid{
background-color: #eee; display: grid; height: 300px; grid-template: repeat(2,100px) / repeat(3,200px); justify-content: start;}
.grid__item{
background-color: #5e5373; border: 1px dashed #ece89d; padding: 10px; color: #fff; font-size: 20px; font-weight: 700;}
1
2
3
4
5
6
Выравнивает сетку по правой стороне контейнера.
CSS код:
.grid{
background-color: #eee; display: grid; height: 300px; grid-template: repeat(2,100px) / repeat(3,200px); justify-content: end;}
.grid__item{
background-color: #5e5373; border: 1px dashed #ece89d; padding: 10px; color: #fff; font-size: 20px; font-weight: 700;}
1
2
3
4
5
6
Выравнивает сетку по центру контейнера.
CSS код:
.grid{
background-color: #eee; display: grid; height: 300px; grid-template: repeat(2,100px) / repeat(3,200px); justify-content: center;}
.grid__item{
background-color: #5e5373; border: 1px dashed #ece89d; padding: 10px; color: #fff; font-size: 20px; font-weight: 700;}
1
2
3
4
5
6
Масштабирует элементы чтобы сетка могла заполнить всю ширину контейнера.
CSS код:
.grid{
background-color: #eee; display: grid; height: 300px; grid-template: repeat(2,100px) / repeat(3,200px); justify-content: stretch;}
.grid__item{
background-color: #5e5373; border: 1px dashed #ece89d; padding: 10px; color: #fff; font-size: 20px; font-weight: 700;}
1
2
3
4
5
6
Одинаковое пространство между элементами, и полуразмерные отступы по краям.
CSS код:
.grid{
background-color: #eee; display: grid; height: 300px; grid-template: repeat(2,100px) / repeat(3,200px); justify-content: space-around;}
.grid__item{
background-color: #5e5373; border: 1px dashed #ece89d; padding: 10px; color: #fff; font-size: 20px; font-weight: 700;}
1
2
3
4
5
6
Одинаковое пространство между элементами, без отступов по краям.
CSS код:
.grid{
background-color: #eee; display: grid; height: 300px; grid-template: repeat(2,100px) / repeat(3,200px); justify-content: space-between;}
.grid__item{
background-color: #5e5373; border: 1px dashed #ece89d; padding: 10px; color: #fff; font-size: 20px; font-weight: 700;}
1
2
3
4
5
6
Одинаковое пространство между элементами, и полноразмерные отступы по краям.
CSS код:
.grid{
background-color: #eee; display: grid; height: 300px; grid-template: repeat(2,100px) / repeat(3,200px); justify-content: space-evenly;}
.grid__item{
background-color: #5e5373; border: 1px dashed #ece89d; padding: 10px; color: #fff; font-size: 20px; font-weight: 700;}
Выравнивание сетки вдоль вертикальной оси
Свойство: align-content
Выравнивает сетку вдоль вертикальной оси (в отличии от justify-content которое выравнивает сетку вдоль горизонтальной оси). Свойство не наследуются.
1
2
3
4
5
6
Выравнивает сетку по верхней стороне контейнера.
CSS код:
.grid{
background-color: #eee; display: grid; height: 300px; grid-template: repeat(2,100px) / repeat(3,200px); align-content: start;}
.grid__item{
background-color: #5e5373; border: 1px dashed #ece89d; padding: 10px; color: #fff; font-size: 20px; font-weight: 700;}
1
2
3
4
5
6
Выравнивает сетку по нижней стороне контейнера.
CSS код:
.grid{
background-color: #eee; display: grid; height: 300px; grid-template: repeat(2,100px) / repeat(3,200px); align-content: end;}
.grid__item{
background-color: #5e5373; border: 1px dashed #ece89d; padding: 10px; color: #fff; font-size: 20px; font-weight: 700;}
1
2
3
4
5
6
Выравнивает сетку по центру контейнера.
CSS код:
.grid{
background-color: #eee; display: grid; height: 300px; grid-template: repeat(2,100px) / repeat(3,200px); align-content: center;}
.grid__item{
background-color: #5e5373; border: 1px dashed #ece89d; padding: 10px; color: #fff; font-size: 20px; font-weight: 700;}
1
2
3
4
5
6
Масштабирует элементы чтобы сетка могла заполнить всю ширину контейнера.
CSS код:
.grid{
background-color: #eee; display: grid; height: 300px; grid-template: repeat(2,100px) / repeat(3,200px); align-content: stretch;}
.grid__item{
background-color: #5e5373; border: 1px dashed #ece89d; padding: 10px; color: #fff; font-size: 20px; font-weight: 700;}
1
2
3
4
5
6
Одинаковое пространство между элементами, и полуразмерные отступы по краям.
CSS код:
.grid{
background-color: #eee; display: grid; height: 300px; grid-template: repeat(2,100px) / repeat(3,200px); align-content: space-around;}
.grid__item{
background-color: #5e5373; border: 1px dashed #ece89d; padding: 10px; color: #fff; font-size: 20px; font-weight: 700;}
1
2
3
4
5
6
Одинаковое пространство между элементами, без отступов по краям.
CSS код:
.grid{
background-color: #eee; display: grid; height: 300px; grid-template: repeat(2,100px) / repeat(3,200px); align-content: space-between;}
.grid__item{
background-color: #5e5373; border: 1px dashed #ece89d; padding: 10px; color: #fff; font-size: 20px; font-weight: 700;}
1
2
3
4
5
6
Одинаковое пространство между элементами, и полноразмерные отступы по краям.
CSS код:
.grid{
background-color: #eee; display: grid; height: 300px; grid-template: repeat(2,100px) / repeat(3,200px); align-content: space-evenly;}
.grid__item{
background-color: #5e5373; border: 1px dashed #ece89d; padding: 10px; color: #fff; font-size: 20px; font-weight: 700;}
Свойства элементов грид-сетки
В разработке