SovaWiki

Инструменты пользователя

Инструменты сайта

Вы посетили:
css:grid:setting_the_grid

Различия

Показаны различия между двумя версиями страницы.

Ссылка на это сравнение

Предыдущая версия справа и слеваПредыдущая версия
Следующая версия		Предыдущая версия
css:grid:setting_the_grid [2023/03/04 13:01] – [3.3. Сокращенная запись явного объявления сетки: свойство grid-template] so_v_acss:grid:setting_the_grid [2026/08/05 09:59] (текущий) – so_v_a
Строка 1: Строка 1:
 +<!DOCTYPE markdown>
 # 3. Определение сетки # 3. Определение сетки
  
Строка 95: Строка 96:
 } }
 ``` ```
- 
 ### 3.1.6. Повтор строк и столбцов ### 3.1.6. Повтор строк и столбцов
  
 Нотация repeat() представляет повторяющийся фрагмент списка дорожек, что позволяет записать в более компактной форме большое количество одинаковых по размерам столбцов или строк. Общая форма синтаксиса следующая: Нотация repeat() представляет повторяющийся фрагмент списка дорожек, что позволяет записать в более компактной форме большое количество одинаковых по размерам столбцов или строк. Общая форма синтаксиса следующая:
  
-`repeat(число или auto-fill или auto-fit, повторяющаяся дорожка)`+``` 
 +repeat(число или auto-fill или auto-fit, повторяющаяся дорожка) 
 +```
  
 Синтаксис Синтаксис
Строка 128: Строка 130:
  
 Используя значение auto-fill, вы всегда получите хотя бы один столбец, даже если он по какой-то причине не помещается в контейнер-сетку. Если вы используете auto-fit, то дорожки, которые не содержат элементы сетки, будут сброшены. Используя значение auto-fill, вы всегда получите хотя бы один столбец, даже если он по какой-то причине не помещается в контейнер-сетку. Если вы используете auto-fit, то дорожки, которые не содержат элементы сетки, будут сброшены.
- 
  
 ## 3.2. Именованные области: свойство grid-template-areas ## 3.2. Именованные области: свойство grid-template-areas
Строка 166: Строка 167:
  
 Размещение элементов сетки с помощью именованных областей: Размещение элементов сетки с помощью именованных областей:
 +
 +[[Grid Layout|{{css:grid:grid-areas.png}}]]
 +
 ```css ```css
 .grid-container { .grid-container {
Строка 194: Строка 198:
 } }
 ``` ```
- 
 ## 3.3. Сокращенная запись явного объявления сетки: свойство grid-template ## 3.3. Сокращенная запись явного объявления сетки: свойство grid-template
  
Строка 235: Строка 238:
 ``` ```
  
-Функция repeat() не разрешена для определения списка дорожек в этом свойстве, если используются именованные области сетки (сетка просто не будет отрисована).+:!: Функция repeat() не разрешена для определения списка дорожек в этом свойстве, если используются именованные области сетки (сетка просто не будет отрисована).
  
  
 ## 3.4. Неявная сетка ## 3.4. Неявная сетка
- 
 ### 3.4.1. Автоматическое создание дорожек сетки: свойства grid-auto-rows и grid-auto-columns ### 3.4.1. Автоматическое создание дорожек сетки: свойства grid-auto-rows и grid-auto-columns
  
 Если элемент сетки расположен в строке или столбце, размер которых не определен явно через grid-template-rows или grid-template-columns, создаются неявные дорожки сетки для его хранения. Это может произойти в случае, если строка или столбец оказались за пределами установленных размеров сетки. Если элемент сетки расположен в строке или столбце, размер которых не определен явно через grid-template-rows или grid-template-columns, создаются неявные дорожки сетки для его хранения. Это может произойти в случае, если строка или столбец оказались за пределами установленных размеров сетки.
  
-По умолчанию эти автоматически добавляемые дорожки имеют минимальный необходимый размер. Свойства grid-auto-rows и grid-auto-columns позволяют контролировать размер неявных дорожек сетки. Если дано несколько размеров дорожек, шаблон повторяется по мере необходимости, чтобы найти размер неявных дорожек. Первая неявная дорожка сетки после явной сетки получает первый заданный размер и так далее.+По умолчанию эти автоматически добавляемые дорожки имеют минимальный необходимый размер. Свойства **grid-auto-rows** и **grid-auto-columns** позволяют контролировать размер неявных дорожек сетки. Если дано несколько размеров дорожек, шаблон повторяется по мере необходимости, чтобы найти размер неявных дорожек. Первая неявная дорожка сетки после явной сетки получает первый заданный размер и так далее.
  
 Свойства не наследуются. Свойства не наследуются.
  
-grid-auto-columns, grid-auto-rows +**grid-auto-columns**, **grid-auto-rows 
- +** 
-Значения:  +| Значения: |  |
 |auto |Значение по умолчанию. | |auto |Значение по умолчанию. |
 |размер дорожки + |В качестве размера дорожки может использоваться любое значение, допустимое для задания размеров дорожек сетки.| |размер дорожки + |В качестве размера дорожки может использоваться любое значение, допустимое для задания размеров дорожек сетки.|
  
-grid-auto-rows.png+[[Grid Layout|{{css:grid:grid-auto-rows.png}}]]
  
 ```css ```css
Строка 290: Строка 291:
 } }
 ``` ```
- +`
 ### 3.4.2. Автоматическое размещение: свойство grid-auto-flow ### 3.4.2. Автоматическое размещение: свойство grid-auto-flow
  
Строка 302: Строка 302:
 grid-auto-flow: grid-auto-flow:
  
-Значения:  +Значения:
 |row |Алгоритм автоматического размещения размещает элементы, заполняя каждую строку по очереди слева-направо (для LTR-языков), добавляя новые строки по мере необходимости. Значение по умолчанию.| |row |Алгоритм автоматического размещения размещает элементы, заполняя каждую строку по очереди слева-направо (для LTR-языков), добавляя новые строки по мере необходимости. Значение по умолчанию.|
 |column |Алгоритм размещает элементы, заполняя каждый столбец по очереди сверху-вниз, добавляя новые столбцы по мере необходимости.| |column |Алгоритм размещает элементы, заполняя каждый столбец по очереди сверху-вниз, добавляя новые столбцы по мере необходимости.|
-|dense |Алгоритм "плотной" укладки элементов. При необходимости может менять порядок следования элементов, заполняя пустые места более крупными элементами. +|dense |Алгоритм "плотной" укладки элементов. При необходимости может менять порядок следования элементов, заполняя пустые места более крупными элементами. Свойство будет полезным при создании компактных галерей, если для изображений не задан порядок, в котором они должны быть расположены. Для каждого элемента сетки браузер сканирует всю сетку в заданном направлении потока (строка или столбец), начиная от начальной точки потока (верхний левый угол, на языках LTR - слева направо), пока не найдет место, куда поместится этот элемент сетки.|
-Свойство будет полезным при создании компактных галерей, если для изображений не задан порядок, в котором они должны быть расположены. Для каждого элемента сетки браузер сканирует всю сетку в заданном направлении потока (строка или столбец), начиная от начальной точки потока (верхний левый угол, на языках LTR - слева направо), пока не найдет место, куда поместится этот элемент сетки.|+
  
 Галерея изображений в стиле Masonry с помощью автоматического размещения элементов сетки: Галерея изображений в стиле Masonry с помощью автоматического размещения элементов сетки:
  
-post-img-3.jpg+{{url>https://html5book.ru/examples/grid/grid-masonry.html|Галерея изображений в стиле Masonry с помощью автоматического размещения элементов сетки}}
  
 ```css ```css
Строка 332: Строка 330:
 } }
 ``` ```
- 
  
 ## 3.5. Сокращенная запись сетки: свойство grid ## 3.5. Сокращенная запись сетки: свойство grid
Строка 343: Строка 340:
  
 Варианты Варианты
-```+```css
 /* значения для grid-template */ /* значения для grid-template */
 grid: none; grid: none;
Строка 366: Строка 363:
 ``` ```
  
 +
 +[[grid_elements|Продолжение]]
 +
 +[[0_content|Оглавление]]
/var/www/html/dokuwiki/data/attic/css/grid/setting_the_grid.1677934910.txt.gz · Последнее изменение: (внешнее изменение)