css:grid:placement_and_reordering_of_grid_elements
Различия
Показаны различия между двумя версиями страницы.
| Следующая версия | Предыдущая версия | ||
| css:grid:placement_and_reordering_of_grid_elements [2023/04/04 15:21] – создано 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, | ||
| - | Каждый элемент сетки связан с областью сетки, которая определяет содержащий блок для элемента сетки. Положение элементов сетки определяется расположением линий сетки и диапазоном сетки - количеством занимаемых дорожек сетки. По умолчанию элемент сетки занимает одну дорожку на каждой оси. Поэтому можно опустить значение grid-column-end или grid-row-end. | ||
| - | Свойства размещения на сетке - grid-row-start, | + | Каждый элемент сетки |
| - | Строка Столбец | + | Свойства размещения на сетке - **grid-row-start**, |
| - | Начало Начальная линия строки Начальная линия столбца | + | ```dokuwiki |
| - | Конец Конечная линия строки Конечная линия столбца | + | | | Строка |
| - | Диапазон Диапазон строк Диапазон столбцов | + | |**Начало**|Начальная линия строки|Начальная линия столбца| |
| - | grid-row-start, | + | |**Конец**|Конечная линия строки|Конечная линия столбца| |
| + | |**Диапазон**|Диапазон строк|Диапазон столбцов| | ||
| + | ``` | ||
| - | Значения: | + | **grid-row-start, |
| - | auto Свойство не влияет на размещение элемента сетки, указывая на автоматическое размещение или диапазон по умолчанию, | + | ```dokuwiki |
| - | имя линии Начальная и конечная линия строки/ | + | |Значения: |
| - | целое число и имя линии? | + | |auto |Свойство не влияет на размещение элемента сетки, указывая на автоматическое размещение или диапазон по умолчанию, |
| - | span и целое число или имя линии Ключевое слово span и целое положительное число/ | + | |имя линии |
| + | |целое число и имя линии? | ||
| + | |span и целое число или имя линии | ||
| + | ``` | ||
| Размещение элементов сетки с помощью числовых индексов линий: | Размещение элементов сетки с помощью числовых индексов линий: | ||
| - | grid-lines-index-1.png | + | ![[grid-lines-index-1.png]] |
| + | ```css | ||
| .grid-container { | .grid-container { | ||
| display: grid; | display: grid; | ||
| Строка 52: | Строка 59: | ||
| grid-column-start: | grid-column-start: | ||
| } | } | ||
| + | ``` | ||
| + | |||
| ### 5.1.1. Именованные линии сетки | ### 5.1.1. Именованные линии сетки | ||
| Строка 57: | Строка 66: | ||
| Хотя на линии сетки можно ссылаться по их числовому индексу, | Хотя на линии сетки можно ссылаться по их числовому индексу, | ||
| - | Имя линии может быть любым, при указании в значении свойства оно заключается в квадратные скобки. В качестве имени линии нельзя использовать слово span. | + | Имя линии может быть любым, при указании в значении свойства оно заключается в квадратные скобки. |
| Размещение элементов сетки с помощью именованных линий: | Размещение элементов сетки с помощью именованных линий: | ||
| - | grid-named-lines-1.png | + | ![[grid-named-lines-1.png]] |
| + | ```css | ||
| .grid-container { | .grid-container { | ||
| display: grid; | display: grid; | ||
| Строка 91: | Строка 102: | ||
| | | ||
| } | } | ||
| + | ``` | ||
| + | |||
| CSS | CSS | ||
| Имена линий добавляются к неявным именам линий сетки, созданным свойством grid-template-areas, | Имена линий добавляются к неявным именам линий сетки, созданным свойством grid-template-areas, | ||
| - | |||
| ## 5.2. Сокращенная запись свойств размещения элементов сетки: свойства grid-row, grid-column и grid-area | ## 5.2. Сокращенная запись свойств размещения элементов сетки: свойства grid-row, grid-column и grid-area | ||
| - | Свойства grid-row и grid-column являются сокращенными именами для свойств grid-row-start/ | + | Свойства |
| - | Если заданы два значения, | + | Если заданы два значения, |
| - | Для свойства grid-area если указано четыре значения, | + | Для свойства |
| - | Если grid-column-end/ | + | _Если grid-column-end/ |
| - | Когда grid-column-start опущен, | + | _Когда grid-column-start опущен, |
| - | grid-area: | + | **grid-area**: |
| + | ```dokuwiki | ||
| + | | grid-row | | grid-column | | | ||
| + | |grid-row-start|grid-row-end|grid-column-start|grid-column-end| | ||
| + | ``` | ||
| - | grid-row grid-column | + | **Синтаксис** |
| - | grid-row-start grid-row-end grid-column-start grid-column-end | + | |
| - | Синтаксис | + | |
| + | ```css | ||
| grid-row: a; | grid-row: a; | ||
| grid-row: auto; | grid-row: auto; | ||
| Строка 119: | Строка 134: | ||
| grid-row: 1 / -1; | grid-row: 1 / -1; | ||
| grid-column: | grid-column: | ||
| + | ``` | ||
| + | |||
| + | |||
| + | ```css | ||
| grid-area: a; | grid-area: a; | ||
| grid-area: auto; | grid-area: auto; | ||
| Строка 124: | Строка 143: | ||
| grid-area: 1 / 3 / -1; | grid-area: 1 / 3 / -1; | ||
| grid-area: header-start / sidebar-start / footer-end / sidebar-start; | grid-area: header-start / sidebar-start / footer-end / sidebar-start; | ||
| + | ``` | ||
| ## 5.3. Переупорядочивание элементов сетки | ## 5.3. Переупорядочивание элементов сетки | ||
| - | Свойство order также применяется к элементам сетки. Это влияет на их автоматическое размещение и порядок отрисовки. Свойство должно использоваться только для визуального, | + | Свойство |
| + | |||
| + | [[grid_elements_alignment|Продолжение]] | ||
| + | [[0_content|Оглавление]] | ||
/var/www/html/dokuwiki/data/attic/css/grid/placement_and_reordering_of_grid_elements.1680621696.txt.gz · Последнее изменение: (внешнее изменение)