Сокращение для grid-template-rows , grid-template-columns , и grid-template-areas .

Значения:

· none - устанавливает все три свойства в их начальное значение;

· subgrid - устанавливает grid-template-rows и grid-template-columns в subgrid, и grid-template-areas в его начальное значение;

· <grid-template-rows> / <grid-template-columns> - устанавливает grid-template-columns и grid-template-rows в определённо е значение, соответственно, и устанавливает grid-template-areas в none;

.container {

grid-template: none | subgrid | <grid-template-rows> / <grid-template-column s>;

}

Он также принимает более сложный, но довольно удобный синтаксис, для указания всех трёх свойств. Вот пример:

.container {

grid-template:

[row1-start] 25px "header header header" [row1-end]

[row2-start] "footer footer footer" 25px [row2-end]

/ auto 50px auto;

}

Что эквивалентно следующему:

.container {

grid-template-rows: [row1-start] 25px [row1-end row2-start] 25px [row2-end];

grid-template-columns: auto 50px auto;

grid-template-areas:

"header header header"

"footer foote r footer";

}

Так как grid-template не сбрасывает неявные свойства (grid-auto-columns, grid-auto-rows, и grid-auto-flow), а в большинстве случаев, вероятно, вы бы захотели это сделать, рекомендуется использовать свойство grid, вместо grid-template.

# grid-column-gap & grid-row-gap

Определяет размер ширины линий. Вы можете думать об этом, как о настройке ширины отступов между столбцами и строками.

Значения задаются в единицах измерения.:

<line-size> - значение размера;

.container {

grid-column-gap: <line-size>;

grid-row-gap: <line-size>;

}

Пример:

.container {

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

grid-template-rows: 80px auto 80px;

grid-column-gap: 10px;

grid-row-gap: 15px;

}

Важно!

Отступы создаются только между колонками и строками, но не для внешних краев сетки.

Grid-gap

Сокращение для grid-row-gapgrid-row-gap и grid-column-gapgrid-column-gap.

Значение:

<grid-row-gap> <grid-column-gap> - значения размеров;

.container {

grid-gap: <grid-row-gap> <grid-column-gap>;

}

Тот же самый пример, но с сокращенным свойствомПример:

.container{

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

grid-template-rows: 80px auto 80px;

grid-gap: 10px 15px;

}

Если значение для grid-row-gapgrid-row-gap не задано, ему присваивается такое же значениезначение, как и у grid-column-gapgrid-column-gap.

Justify-items

Выравнивает содержимое вдоль оси строки (в отличии от align-items который выравнивает элементы вдоль оси столбца).

 Это значение применяется ко всем элементам сетки внутри контейнера.

Значения:

· start - выравнивает содержимое по левой стороне области;

· end - выравнивает содержимое по правой стороне области;

· center - выравнивает содержимое по центру области;

· stretch - заполняет всю ширину области (по умолчанию);.

.container {

justify-items: start | end | center | stretch;

}

Примеры:

.container {

justify-items: start;

}

.container{

justify-items: end;

}

.container{

justify-items: center;

}

.container{

justify-items: stretch;

}

Align-items

Выравнивает содержимое вдоль оси столбца (в отличии от justify-items который выравнивает элементы вдоль оси строки).

 Это значение применяется ко всем элементам сетки внутри контейнера.

Значения:

· start - выравнивание элементов по верхней части области;

· end - выравнивание элементов по нижней части области;

· center - выравнивание элементов по центру области;

· stretch - заполняет всю высоту области. (по умолчанию);

.container {

align-items: start | end | center | stretch;

}

Примеры:

.container {

align-items: start;

}

.container {

align-items: end;

}

.con tainer {

align-items: center;

}

.container {

align-items: stretch;

}

Justify-content

Иногда общий размер сетки может быть меньше размера контейнера. Такое может случится если у всех элементов сетки заданы фиксированные единицы измерения, напримернапример, px. В таком случае можно установить выравнивание сетки внутри контейнера.

 Это свойство выравнивает сетку вдоль оси строки (в отличии от свойства align-content, которое выравнивает сетку вдоль оси столбца).

Значения:

· start - выравнивает сетку по левой стороне контейнера;

· end - выравнивает сетку по правой стороне контейнера;

· center - выравнивает сетку по центру контейнера;

· stretch - масштабирует элементы чтобы сетка могла заполнить всю ширину контейнера;

· space-around - одинаковое пространство между элементами, и полуразмерные отступы по краям;

· space-between - одинаковое пространство между элементами, без отступов по краям;

· space-evenly - одинаковое пространство между элементами, и полноразмерные отступы по краям;

.container {

justify-content: start | end | center | stretch | space-around | space-between | space-evenly;   

}

Примеры:

.container {

justify-content: start;

}

 

.container {

justify-content: end;

}

.container {

justify-content: center;

}

.container {

justify-content: stretch;

}

.container {

justify-content: space-around;

}

.container {

justify-content: space-between;

}

.container {

justify-content: space-evenly;

}

 

Align-content

Иногда общий размер сетки может быть меньше размера контейнера. Такое может случится если у всех элементов сетки зада фиксированные единицы измерения, например px. В таком случае можноЕще одно свойство, которое помогает установить выравнивание сетки внутри контейнера.

 Это свойство выравнивает сетку вдоль оси колонки. (в отличии от свойства justify-content, которое выравнивает сетку вдоль оси строки).

Значения:

· start - выравнивает сетку по верхней части контейнера;

· end - выравнивает сетку по нижней части контейнера;

· center - выравнивает сетку по центру контейнера;

· stretch - масштабирует элементы чтобы сетка могла заполнить всю высоту контейнера;

· space-around - одинаковое пространство между элементами, и полуразмерные отступы по краям;

· space-between - одинаковое пространство между элементами, без отступов по краям;

· space-evenly - одинаковое пространство между элементами, и полноразмерные отступы по краям;

.container {

align-content: start | end | center | stretch | space-around | space-between | space-evenly; 

}

Примеры:

.container {

align-content: start;

}

 

.container {

align-content: end;

}

.container {

align-content: center;

}

.container {

align-content: stretch;

}

.container {

align-content: space-around;

}

.container {

align-content: space-between;

}

.container {

align-content: space-evenly;

}

grid-auto-columns &  grid-auto-rows

Определяет размер любых автоматически созданных треков (иначе говоря, неявных треков). Неявные треки создаются при явном позиционировании столбцов и строк (через grid-template-rows/grid-template-columns), которые находятся за пределами заданной сетки.

Значение я:

<track-size> - может быть фиксированным размером, процентами, или частью свободного пространства в сетке (с использованием единицы fr);

.container {

grid-auto-columns: <track-size>...;

grid-auto-rows: <track-size>...;

}

Чтобы проиллюстрировать то как создаются неявные треки, посмотрите на это:

 

Пример выше справа создаст сетку 2 x 2.

А теперь представьте, что вы позиционируете элементы сетки с помощью grid-column grid-column и grid-row grid-row следующим образом:

.item-a {

grid-column: 1 / 2;

grid-row: 2 / 3;

}

.item-b {

grid-column: 5 / 6;

grid-row: 2 / 3;

}

Мы сказали чтобы элемент. item-b начинался с 5 линии и заканчивался на 6 линии, по оси столбцов, но мы не определяли линии 5 и 6. Так как мы ссылаемся на не существующие линии, неявные треки с шириной 0 были созданы чтобы заполнить пробелы. Мы можем использовать grid-auto-columns grid-auto-columns и grid-auto-rows grid-auto-rows чтобы указать ширину этим неявным трекам:

.container {

grid-auto-columns: 60px;

}

 

Grid-auto-flow

Если у вас есть элементы, которые вы явно не позиционируете в сетке, запускается алгоритм авто-размещения, чтобы их автоматически разместить. Это свойство контролирует то как алгоритм авто-размещения работает.

Значения:

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

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

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

·.container {

grid-auto-flow: row | column | row dense | column dense

· }

Внимание!

Обратите внимание на то что dense может привести сделать такк тому, что ваши элементы будут отображаться не по порядку.

Примеры:

Рассмотрим следующий HTML:

<section class="container">

<div class="item-a">item-a</div>

<div class="item-b">item-b</div>

<div class="item-c">item-c</div>

<div class="item-d">item-d</div>

<div class="item-e">item-e</div>

</section>

Вы Мы определили сетку с пятью колонками и двумя рядами, а свойство grid-auto-flow установили в row (оно же значение по умолчанию).

.container {

display: grid;

grid-template-columns: 60px 60px 60px 60px 60px;

grid-template-rows: 30px 30px;

grid-auto-flow: row;

}

При размещении элементов в сетке, вы указываете позиции только для двух из них:

.item-a {

grid-column: 1;

grid-row: 1 / 3;

}

.item-e {

grid-column: 5;

grid-row: 1 / 3;

}

Так как мы установили grid-auto-flow в row, наша сетка будет выглядеть как на изображении ниже. Обратите внимание на то, как три элемента которые мы не расположили (item-b, item-c и item-d) перетекают через пустые строки:

 

Если вместо этого мы установим свойство grid-auto-flow в column, элементы item-b, item--c anсd item-d будут перетекать сквозь колонки:

.container {

display: grid;

grid-template-columns: 60px 60px 60px 60px 60px;

grid-template-rows: 30px 30px;

grid-auto-flow: column;

}

 

Grid

Сокращение для настройки всех следующих свойств: grid-template-rows grid-template-rows, grid-template-columns grid-template-columns, grid-template-areas grid-template-areas, grid-auto-rows grid-auto-rows, grid-auto-columns grid-auto-columns, и grid-auto-flow grid-auto-flow. Он также настраивает grid-column-gapgrid-column-gap и grid-row-gapgrid-row-gap на их начальные значения, даже если они не могут быть явно заданы этим свойством.

Значения:

· none - настраивает все свойства на их начальные значения;

· <grid-template-rows> / <grid-template-columns> - настраивает grid-template-rowsgrid-template-rowsи grid-template-columnsgrid-template-columns на соответствующие указанные значения, а все остальные свойства сбрасывает к их начальным значениям;

· <grid-auto-flow> [<grid-auto-rows> [ / <grid-auto-columns>] ] - принимает те же самые значения что и grid-auto-flowgrid-auto-flow, grid-auto-rowsgrid-auto-rows и grid-auto-columnsgrid-auto-columns, соответственно. Если grid-auto-columns опущено, устанавливается значение соответствующие для grid-auto-rows. Если опущены оба, то они устанавливаются в начальные значения;

.container {

grid: none | <grid-template-rows> / <grid-template-columns> | <grid-auto-flow> [<grid-auto-rows> [/ <grid-auto-columns>]];

}

Примеры: