SovaWiki

Эта страница только для чтения. Вы можете посмотреть её исходный текст, но не можете его изменить. Сообщите администратору, если считаете, что это неправильно.
<!DOCTYPE markdown>
# 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|Оглавление]]