CSS Grid Layout // «Фрилансер по жизни»

Полезные ссылки
ВНИМАНИЕ! Шпаргалка будет дорабатываться по мере развития технологии.
Варианты объявления grid-контейнера
Свойство display
Грид-контейнер определяется как блочный элемент.
.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;}
Грид-контейнер определяется как блочно-строчный элемент.
.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
fr — единица длины, которая позволяет создавать гибкие дорожки. Не является единицей измерения в обычном ее понимании, поэтому не может быть представлена или объединена с другими типами единиц в выражениях calc(). Общий размер фиксированных строк или столбцов вычитается из доступного пространства контейнера-сетки. Оставшееся пространство делится между строками и столбцами с гибкими размерами пропорционально их коэффициенту.
.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;}
Размеры в % вычисляются от ширины или высоты контейнера-сетки.
.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;}
Функция minmax(min,max) определяет диапазон размеров, больше или равный min и меньше или равный max. Если max < min, то max игнорируется, а minmax(min,max) обрабатывается как min. Значения в fr можно устанавливать только как максимальное.
.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;}
Значение auto ориентируется на содержимое элементов сетки одной дорожки. Как минимум, рассматривается как минимальный размер элемента сетки, как определено min-width или min-height. Как максимум, обрабатывается так же, как и max-content. Может растягиваться за счет свойств align-content и justify-content.
.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;}
Нотация repeat() представляет повторяющийся фрагмент списка дорожек, что позволяет записать в более компактной форме большое количество одинаковых по размерам столбцов или строк.
.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;}
Используя значение auto-fill, вы всегда получите хотя бы один столбец, даже если он по какой-то причине не помещается в контейнер-сетку.
.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;}
Если вы используете auto-fit, то дорожки, которые не содержат элементы сетки, будут сброшены.
.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;}
Свойство grid-template-areas определяет именованные области сетки, которые не связаны с каким-либо конкретным элементом сетки, но на которые можно ссылаться из свойств размещения сетки. Синтаксис свойства обеспечивает визуализацию структуры сетки, облегчая понимание общего макета контейнера-сетки. Свойство не наследуется.
.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-auto-rows и grid-auto-columns позволяют контролировать размер неявных дорожек сетки. Если дано несколько размеров дорожек, шаблон повторяется по мере необходимости, чтобы найти размер неявных дорожек. Первая неявная дорожка сетки после явной сетки получает первый заданный размер и так далее. Свойства не наследуются.
.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;}
По умолчанию эти автоматически добавляемые дорожки имеют минимальный необходимый размер. Свойства grid-auto-rows и grid-auto-columns позволяют контролировать размер неявных дорожек сетки. Если дано несколько размеров дорожек, шаблон повторяется по мере необходимости, чтобы найти размер неявных дорожек. Первая неявная дорожка сетки после явной сетки получает первый заданный размер и так далее. Свойства не наследуются.
.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;}
Алгоритм автоматического размещения размещает элементы, заполняя каждую строку по очереди слева-направо (для LTR-языков), добавляя новые строки по мере необходимости. Значение по умолчанию.
.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;}
Алгоритм размещает элементы, заполняя каждый столбец по очереди сверху-вниз, добавляя новые столбцы по мере необходимости.
.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;}
Алгоритм "плотной" укладки элементов. При необходимости может менять порядок следования элементов, заполняя пустые места более крупными элементами.
.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
Заполняет всю ширину области (по умолчанию).
.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;}
Выравнивает содержимое по левой стороне области.
.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;}
Выравнивает содержимое по правой стороне области.
.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;}
Выравнивает содержимое по центру области.
.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
Заполняет всю ширину области (по умолчанию).
.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;}
Выравнивает содержимое по верхней стороне области.
.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;}
Выравнивает содержимое по нижней стороне области.
.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;}
Выравнивает содержимое по центру области.
.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
Выравнивает сетку по левой стороне контейнера.
.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;}
Выравнивает сетку по правой стороне контейнера.
.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;}
Выравнивает сетку по центру контейнера.
.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;}
Масштабирует элементы чтобы сетка могла заполнить всю ширину контейнера.
.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;}
Одинаковое пространство между элементами, и полуразмерные отступы по краям.
.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;}
Одинаковое пространство между элементами, без отступов по краям.
.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;}
Одинаковое пространство между элементами, и полноразмерные отступы по краям.
.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
Выравнивает сетку по верхней стороне контейнера.
.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;}
Выравнивает сетку по нижней стороне контейнера.
.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;}
Выравнивает сетку по центру контейнера.
.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;}
Масштабирует элементы чтобы сетка могла заполнить всю ширину контейнера.
.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;}
Одинаковое пространство между элементами, и полуразмерные отступы по краям.
.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;}
Одинаковое пространство между элементами, без отступов по краям.
.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;}
Одинаковое пространство между элементами, и полноразмерные отступы по краям.
.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;}