css:grid:placement_and_reordering_of_grid_elements
Различия
Показаны различия между двумя версиями страницы.
| Предыдущая версия справа и слеваПредыдущая версияСледующая версия | Предыдущая версия | ||
| css:grid:placement_and_reordering_of_grid_elements [2023/04/04 15:24] – [5.2. Сокращенная запись свойств размещения элементов сетки: свойства grid-row, grid-column и grid-area] so_v_a | css:grid:placement_and_reordering_of_grid_elements [2026/08/05 10:02] (текущий) – so_v_a | ||
|---|---|---|---|
| Строка 1: | Строка 1: | ||
| + | < | ||
| # 5. Размещение и переупорядочивание элементов сетки | # 5. Размещение и переупорядочивание элементов сетки | ||
| Свойства размещения позволяют свободно упорядочивать и переупорядочивать содержимое сетки таким образом, | Свойства размещения позволяют свободно упорядочивать и переупорядочивать содержимое сетки таким образом, | ||
| - | |||
| ## 5.1. Размещение с помощью линий сетки: свойства grid-row-start, | ## 5.1. Размещение с помощью линий сетки: свойства grid-row-start, | ||
| Строка 9: | Строка 9: | ||
| Свойства размещения на сетке - **grid-row-start**, | Свойства размещения на сетке - **grid-row-start**, | ||
| + | ```dokuwiki | ||
| | | Строка | Столбец | | | | Строка | Столбец | | ||
| - | |---|---|---| | ||
| |**Начало**|Начальная линия строки|Начальная линия столбца| | |**Начало**|Начальная линия строки|Начальная линия столбца| | ||
| |**Конец**|Конечная линия строки|Конечная линия столбца| | |**Конец**|Конечная линия строки|Конечная линия столбца| | ||
| |**Диапазон**|Диапазон строк|Диапазон столбцов| | |**Диапазон**|Диапазон строк|Диапазон столбцов| | ||
| + | ``` | ||
| **grid-row-start, | **grid-row-start, | ||
| + | ```dokuwiki | ||
| |Значения: | |Значения: | ||
| - | |---|---| | ||
| |auto |Свойство не влияет на размещение элемента сетки, указывая на автоматическое размещение или диапазон по умолчанию, | |auto |Свойство не влияет на размещение элемента сетки, указывая на автоматическое размещение или диапазон по умолчанию, | ||
| |имя линии |Начальная и конечная линия строки/ | |имя линии |Начальная и конечная линия строки/ | ||
| |целое число и имя линии? |Начальная и конечная линия строки/ | |целое число и имя линии? |Начальная и конечная линия строки/ | ||
| |span и целое число или имя линии |Ключевое слово span и целое положительное число/ | |span и целое число или имя линии |Ключевое слово span и целое положительное число/ | ||
| + | ``` | ||
| Размещение элементов сетки с помощью числовых индексов линий: | Размещение элементов сетки с помощью числовых индексов линий: | ||
| ![[grid-lines-index-1.png]] | ![[grid-lines-index-1.png]] | ||
| Строка 122: | Строка 121: | ||
| **grid-area**: | **grid-area**: | ||
| + | ```dokuwiki | ||
| | grid-row | | grid-column | | | | grid-row | | grid-column | | | ||
| |grid-row-start|grid-row-end|grid-column-start|grid-column-end| | |grid-row-start|grid-row-end|grid-column-start|grid-column-end| | ||
| + | ``` | ||
| **Синтаксис** | **Синтаксис** | ||
| Строка 144: | Строка 144: | ||
| grid-area: header-start / sidebar-start / footer-end / sidebar-start; | grid-area: header-start / sidebar-start / footer-end / sidebar-start; | ||
| ``` | ``` | ||
| - | |||
| ## 5.3. Переупорядочивание элементов сетки | ## 5.3. Переупорядочивание элементов сетки | ||
| Строка 150: | Строка 149: | ||
| Свойство **order** также применяется к элементам сетки. Это влияет на их автоматическое размещение и порядок отрисовки. Свойство должно использоваться только для визуального, | Свойство **order** также применяется к элементам сетки. Это влияет на их автоматическое размещение и порядок отрисовки. Свойство должно использоваться только для визуального, | ||
| + | |||
| + | |||
| + | [[grid_elements_alignment|Продолжение]] | ||
| + | |||
| + | [[0_content|Оглавление]] | ||
/var/www/html/dokuwiki/data/attic/css/grid/placement_and_reordering_of_grid_elements.1680621862.txt.gz · Последнее изменение: (внешнее изменение)
