Свойства для дочерних элементов (Grid элементы)

grid-column-start & grid-column-end & grid-row-start & grid-row-end

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

grid-column-start/grid-row-start - это линия с которой начинается элемент, а grid-column-end/grid-row-end - это линия на которой элемент заканчивается.

Значения:

· <line> - может быть числом ссылающимся на пронумерованную линию, или названием ссылающимся на именованую линию;

· span <number> - элемент, который будет охватывать предоставленное заданное количество треков;

· span <name> - элемент будет будет охватывать треки пока не достигнет линии с указанным названием;

· auto - указывает автоматическое размещения, автоматическое охват, или охват по умолчанию;

.item {

grid-column-start: <number> | <name> | span <number> | span <name> | auto

grid-column-end: <number> | <name> | span <number> | span <name> | auto

grid-row-start: <number> | <name> | span <number> | span <name> | auto

grid-row-end: <number> | <name> | span <number> | span <name> | auto

}

Примеры:

.item-a {

grid-column-start: 2;

grid-column-end: five;

grid-row-start: row1-start

grid-row-end: 3

}

 

Важно!

.item-b {

grid-column-start: 1;

grid-column-end: span col4-start;

grid-row-start: 2

grid-row-end: span 2

}

Если grid-column-end / grid-row-end не объявлены, элемент будет охватывать 1 трек по умолчанию.

grid-column & grid-row

Сокращение для grid-column-startgrid-column-start + grid-column-endgrid-column-end, и grid-row-startgrid-row-start + grid-row-endgrid-row-end, соответственно.

Значения задаются в следующем виде::

<start-line> / <end-line> - каждый из них принимает тоже самое, что и в длинной версии, включая охват;

.item {

grid-column: <start-line> / <end-line> | <start-line> / span <value>;

grid-row: <start-line> / <end-line> | <start-line> / span <value>;

}

Пример:

.item-c {

grid-column: 3 / span 2;

grid-row: third-line / 4;

}

 

Если значение конечной линии не указано, то элемент будет охватывать только 1 трек, по умолчанию.

Grid-area

Даёт название элементу чтобы можно было ссылаться на него с помощью шаблонашаблона, созданного через grid-template-areas grid-template-areas свойство.

В качестве альтернативы, это свойство может быть использовано в качестве сокращения для grid-row-start + grid-column-start + grid-row-end + grid-column-end.

Значения:

· <name> - название, которое вы выберите;

· <row-start> / <column-start> / <row-end> / <column-end> - может быть нумерацией или названиями линий;

.item {

grid-area: <name> | <row-start> / <column-start> / <row-end> / <column-end>;

}

Примеры:

Как способ назначить название элементу:

.item-d {

grid-area: header

}

Как сокращение для grid-row-start + grid-column-start + grid-row-end+ grid-column-end:

.item-d {

grid-area: 1 / col4-start / last-line / 6

}

 

 

Justify-self

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

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

Значения:

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

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

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

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

.item {

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

}

Примеры:

.item-a {

justify-self: start;

}

.item-a {

justify-self: end;

}

.item-a {

justify-self: center;

}

.item-a {

justify-self: stretch;

}

Align-self

Выравнивает содержимое элемента вдоль оси столбца (в отличии от justify-self, который выравнивает вдоль оси строки). Это значение применяется к содержимому внутри отдельного элемента.

Значения:

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

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

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

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

.item {

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

}

Примеры:

.item-a {

align-self: start;

}

.item-a {

align-self: end;

}

.item-a {

align-self: center;

}

.item-a {

align-self: stretch;

}