Это старая версия документа!
# 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
```css .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
```css .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 |
Синтаксис
```css grid-row: a; grid-row: auto; grid-column: 2; grid-row: 1 / -1; grid-column: sidebar-start / footer-end; ```
```css 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 также применяется к элементам сетки. Это влияет на их автоматическое размещение и порядок отрисовки. Свойство должно использоваться только для визуального, а не логического переупорядочения контента.