Это старая версия документа!
# 5. Размещение и переупорядочивание элементов сетки Свойства размещения позволяют свободно упорядочивать и переупорядочивать содержимое сетки таким образом, что визуальное представление может значительно отличаться от порядка элементов в html-документе.
## 5.1. Размещение с помощью линий сетки: свойства grid-row-start, grid-column-start, grid-row-end и grid-column-end Каждый элемент сетки связан с областью сетки, которая определяет содержащий блок для элемента сетки. Положение элементов сетки определяется расположением линий сетки и диапазоном сетки - количеством занимаемых дорожек сетки. По умолчанию элемент сетки занимает одну дорожку на каждой оси. Поэтому можно опустить значение grid-column-end или grid-row-end.
Свойства размещения на сетке - grid-row-start, grid-row-end, grid-column-start и grid-column-end и их краткая запись grid-row, grid-column и grid-area позволяют определить размещение элемента сетки, предоставив любую (или ноль) из следующих шести частей информации:
Строка Столбец Начало Начальная линия строки Начальная линия столбца Конец Конечная линия строки Конечная линия столбца Диапазон Диапазон строк Диапазон столбцов grid-row-start, grid-column-start, grid-row-end, grid-column-end:
Значения: auto Свойство не влияет на размещение элемента сетки, указывая на автоматическое размещение или диапазон по умолчанию, равный единице. имя линии Начальная и конечная линия строки/столбца задаются в именованных линий сетки. целое число и имя линии? Начальная и конечная линия строки/столбца задаются с помощью целого числа (отрицательное порядковый номер линии сетки будет отсчитываться с противоположного края явной сетки) и (необязательно) имени линии. span и целое число или имя линии Ключевое слово span и целое положительное число/имя линии задают диапазон ячеек для размещения элемента сетки. Размещение элементов сетки с помощью числовых индексов линий: grid-lines-index-1.png
.grid-container {
display: grid; grid-template-rows: 200px 200px 200px; grid-template-columns: 1fr 1fr 1fr;
} .post-1 {
grid-row-start: 1; grid-row-end: 3; grid-column-start: 1; grid-column-end: 3;
} .post-2 {
grid-row-start: 1; grid-column-start: 3;
} .post-3 {
grid-row-start: 2; grid-column-start: 3;
} .post-4 {
grid-row-start: 3; grid-column-start: 3;
} .post-5 {
grid-row-start: 3; grid-column-start: 2;
} .post-6 {
grid-row-start: 3; grid-column-start: 1;
}
### 5.1.1. Именованные линии сетки
Хотя на линии сетки можно ссылаться по их числовому индексу, именованные линии облегчают понимание и использование свойств размещения сетки. Линии могут быть названы явно в свойствах grid-template-rows и grid-template-columns или неявно путем создания именованных областей сетки в свойстве grid-template-areas.
Имя линии может быть любым, при указании в значении свойства оно заключается в квадратные скобки. В качестве имени линии нельзя использовать слово span.
Размещение элементов сетки с помощью именованных линий: grid-named-lines-1.png
.grid-container {
display: grid; grid-template-rows: [start] 200px [row2] 200px [row3] 200px [row-end]; grid-template-columns: [start] 1fr [col2] 1fr [col3] 1fr [col-end];
} .post-1 {
grid-row-start: span 2; grid-column-start: span 2;
} .post-2 {
grid-row-start: start; grid-column-start: col3;
} .post-3 {
grid-row-start: row2; grid-column-start: col3;
} .post-4 {
grid-row-start: row3; grid-column-start: col3;
} .post-5 {
grid-row-start: row3; grid-column-start: col2;
} .post-6 { grid-row-start: row3; grid-column-start: start; } CSS
Имена линий добавляются к неявным именам линий сетки, созданным свойством grid-template-areas, принимая вид name-start и name-end. Имена линий сетки никогда не заменяют другие имена линий сетки. Вместо этого они просто накапливаются.
## 5.2. Сокращенная запись свойств размещения элементов сетки: свойства grid-row, grid-column и grid-area
Свойства grid-row и grid-column являются сокращенными именами для свойств grid-row-start/grid-row-end и grid-column-start/grid-column-end соответственно.
Если заданы два значения, первое (до косой черты) устанавливается для параметра grid-row-start/grid-column-start, второе - для grid-row-end/grid-column-end. Если второе значение опущено, а первое указано в формате пользовательского идентификатора, то grid-row-end/grid-column-end также устанавливается в пользовательское имя сетки. В противном случае, оно вычисляется в auto.
Для свойства grid-area если указано четыре значения, первое устанавливается для grid-row-start, второе - для grid-column-start, третье - для grid-row-end, четвертое - для grid-column-end.
Если grid-column-end/grid-row-end не указан, а grid-column-start/grid-row-start указан в форме пользовательского имени, то для grid-column-end/grid-row-end также устанавливается значение пользовательского имени линии; в противном случае он установлен на auto.
Когда grid-column-start опущен, а значение grid-row-start указан в форме пользовательского имени, оно устанавливается для всех четырех значений. В противном случае оно устанавливается на auto.
grid-area:
grid-row grid-column grid-row-start grid-row-end grid-column-start grid-column-end Синтаксис
grid-row: a; grid-row: auto; grid-column: 2; grid-row: 1 / -1; grid-column: sidebar-start / footer-end; grid-area: a; grid-area: auto; grid-area: 2 / 4; grid-area: 1 / 3 / -1; grid-area: header-start / sidebar-start / footer-end / sidebar-start;
## 5.3. Переупорядочивание элементов сетки
Свойство order также применяется к элементам сетки. Это влияет на их автоматическое размещение и порядок отрисовки. Свойство должно использоваться только для визуального, а не логического переупорядочения контента.