Шпаргалка будет дорабатываться по мере развития технологии.
Грид-контейнер определяется как блочный элемент.
CSS код:
background-color: #eee;
display: grid;
}
.grid__item{
background-color: #5e5373;
border: 1px dashed #ece89d;
padding: 10px;
color: #fff;
font-size: 20px;
font-weight: 700;
}
Грид-контейнер определяется как блочно-строчный элемент.
CSS код:
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;
}
fr — единица длины, которая позволяет создавать гибкие дорожки. Не является единицей измерения в обычном ее понимании, поэтому не может быть представлена или объединена с другими типами единиц в выражениях calc(). Общий размер фиксированных строк или столбцов вычитается из доступного пространства контейнера-сетки. Оставшееся пространство делится между строками и столбцами с гибкими размерами пропорционально их коэффициенту.
CSS код:
background-color: #eee;
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr;
}
Или:
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;
}
Размеры в % вычисляются от ширины или высоты контейнера-сетки.
CSS код:
background-color: #eee;
display: grid;
grid-template-columns: 20% 30% 20%;;
grid-template-rows: 80% 120%;;
}
.grid__item{
background-color: #5e5373;
border: 1px dashed #ece89d;
padding: 10px;
color: #fff;
font-size: 20px;
font-weight: 700;
}
Или:
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 можно устанавливать только как максимальное.
CSS код:
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);
}
Или:
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.
CSS код:
background-color: #eee;
display: grid;
grid-template-columns: auto 1fr auto;
grid-template-rows: auto 1fr;
}
Или:
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() представляет повторяющийся фрагмент списка дорожек, что позволяет записать в более компактной форме большое количество одинаковых по размерам столбцов или строк.
CSS код:
background-color: #eee;
display: grid;
grid-template-columns: repeat(3,1fr);
grid-template-rows: repeat(2,1fr);
}
Или:
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, вы всегда получите хотя бы один столбец, даже если он по какой-то причине не помещается в контейнер-сетку.
CSS код:
background-color: #eee;
display: grid;
grid-template-columns: repeat(auto-fill,minmax(150px, 1fr));
}
Или:
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, то дорожки, которые не содержат элементы сетки, будут сброшены.
CSS код:
background-color: #eee;
display: grid;
grid-template-columns: repeat(auto-fit,minmax(150px, 1fr));
}
Или:
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 определяет именованные области сетки, которые не связаны с каким-либо конкретным элементом сетки, но на которые можно ссылаться из свойств размещения сетки. Синтаксис свойства обеспечивает визуализацию структуры сетки, облегчая понимание общего макета контейнера-сетки. Свойство не наследуется.
CSS код:
background-color: #eee;
display: grid;
grid-template-columns: 150px 1fr;
grid-template-areas: 'header header' 'sidebar content' 'block-1 block-2' 'footer footer';
}
Или:
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-rows и grid-auto-columns позволяют контролировать размер неявных дорожек сетки. Если дано несколько размеров дорожек, шаблон повторяется по мере необходимости, чтобы найти размер неявных дорожек. Первая неявная дорожка сетки после явной сетки получает первый заданный размер и так далее. Свойства не наследуются.
CSS код:
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 позволяют контролировать размер неявных дорожек сетки. Если дано несколько размеров дорожек, шаблон повторяется по мере необходимости, чтобы найти размер неявных дорожек. Первая неявная дорожка сетки после явной сетки получает первый заданный размер и так далее. Свойства не наследуются.
CSS код:
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-языков), добавляя новые строки по мере необходимости. Значение по умолчанию.
CSS код:
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;
}
Алгоритм размещает элементы, заполняя каждый столбец по очереди сверху-вниз, добавляя новые столбцы по мере необходимости.
CSS код:
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;
}
Алгоритм "плотной" укладки элементов. При необходимости может менять порядок следования элементов, заполняя пустые места более крупными элементами.
CSS код:
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;
}
Заполняет всю ширину области (по умолчанию).
CSS код:
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;
}
Выравнивает содержимое по левой стороне области.
CSS код:
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;
}
Выравнивает содержимое по правой стороне области.
CSS код:
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;
}
Выравнивает содержимое по центру области.
CSS код:
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;
}
Заполняет всю ширину области (по умолчанию).
CSS код:
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;
}
Выравнивает содержимое по верхней стороне области.
CSS код:
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;
}
Выравнивает содержимое по нижней стороне области.
CSS код:
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;
}
Выравнивает содержимое по центру области.
CSS код:
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;
}
Выравнивает содержимое по верхней стороне области.
CSS код:
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;
}
Выравнивает сетку по правой стороне контейнера.
CSS код:
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;
}
Выравнивает сетку по центру контейнера.
CSS код:
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;
}
Масштабирует элементы чтобы сетка могла заполнить всю ширину контейнера.
CSS код:
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;
}
Одинаковое пространство между элементами, и полуразмерные отступы по краям.
CSS код:
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;
}
Одинаковое пространство между элементами, без отступов по краям.
CSS код:
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;
}
Одинаковое пространство между элементами, и полноразмерные отступы по краям.
CSS код:
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;
}
Выравнивает сетку по верхней стороне контейнера.
CSS код:
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;
}
Выравнивает сетку по нижней стороне контейнера.
CSS код:
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;
}
Выравнивает сетку по центру контейнера.
CSS код:
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;
}
Масштабирует элементы чтобы сетка могла заполнить всю ширину контейнера.
CSS код:
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;
}
Одинаковое пространство между элементами, и полуразмерные отступы по краям.
CSS код:
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;
}
Одинаковое пространство между элементами, без отступов по краям.
CSS код:
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;
}
Одинаковое пространство между элементами, и полноразмерные отступы по краям.
CSS код:
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;
}