# 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** позволяют определить размещение элемента сетки, предоставив любую (или ноль) из следующих шести частей информации: ```dokuwiki | | Строка | Столбец | |**Начало**|Начальная линия строки|Начальная линия столбца| |**Конец**|Конечная линия строки|Конечная линия столбца| |**Диапазон**|Диапазон строк|Диапазон столбцов| ``` **grid-row-start, grid-column-start, grid-row-end, grid-column-end**: ```dokuwiki |Значения: | | |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**: ```dokuwiki | 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** также применяется к элементам сетки. Это влияет на их автоматическое размещение и порядок отрисовки. Свойство должно использоваться только для визуального, а не логического переупорядочения контента. [[grid_elements_alignment|Продолжение]] [[0_content|Оглавление]]