SovaWiki

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

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

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

Различия

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

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

Предыдущая версия справа и слеваПредыдущая версия
Следующая версия		Предыдущая версия
css:grid:setting_the_grid [2023/03/04 12:46] – [3.1.1. Относительные, абсолютные единицы и процентные значения для определения дорожек сетки (длина)] so_v_acss:grid:setting_the_grid [2026/08/05 09:59] (текущий) – so_v_a
Строка 1: Строка 1:
 +<!DOCTYPE markdown>
 # 3. Определение сетки # 3. Определение сетки
  
Строка 14: Строка 15:
 ### 3.1.1. Относительные, абсолютные единицы и процентные значения для определения дорожек сетки (длина) ### 3.1.1. Относительные, абсолютные единицы и процентные значения для определения дорожек сетки (длина)
  
-Размеры дорожек сетки можно задавать с помощью положительных значений, используя относительные единицы длины — например, **em**, **vh**, **vw**; абсолютные единицы длины — **px**; и проценты **%**.+Размеры дорожек сетки можно задавать с помощью положительных значений, используя относительные единицы длины — например, **em**, **vh**, **vw**; абсолютные единицы длины — **px**; и проценты - **%**.
 Размеры в % вычисляются от ширины или высоты контейнера-сетки. Размеры в % вычисляются от ширины или высоты контейнера-сетки.
  
Строка 25: Строка 26:
 } }
 ``` ```
- 
 ### 3.1.2. Гибкие размеры дорожек: единица измерения fr ### 3.1.2. Гибкие размеры дорожек: единица измерения fr
  
-fr — единица длины, которая позволяет создавать гибкие дорожки. Не является единицей измерения в обычном ее понимании, поэтому не может быть представлена или объединена с другими типами единиц в выражениях calc().+**fr** — единица длины, которая позволяет создавать гибкие дорожки. Не является единицей измерения в обычном ее понимании, поэтому __не может быть представлена или объединена с другими типами единиц в выражениях calc()__.
  
 Общий размер фиксированных строк или столбцов вычитается из доступного пространства контейнера-сетки. Оставшееся пространство делится между строками и столбцами с гибкими размерами пропорционально их коэффициенту, например: Общий размер фиксированных строк или столбцов вычитается из доступного пространства контейнера-сетки. Оставшееся пространство делится между строками и столбцами с гибкими размерами пропорционально их коэффициенту, например:
Строка 47: Строка 47:
  
 Если доступное пространство бесконечно (то есть, ширина или высота контейнера-сетки не заданы), дорожки сетки гибкого размера масштабируются по своему содержимому, сохраняя при этом их соответствующие пропорции. Если доступное пространство бесконечно (то есть, ширина или высота контейнера-сетки не заданы), дорожки сетки гибкого размера масштабируются по своему содержимому, сохраняя при этом их соответствующие пропорции.
- 
 ### 3.1.3. Минимальные и максимальные размеры дорожек ### 3.1.3. Минимальные и максимальные размеры дорожек
  
-Ключевое слово max-content устанавливает для дорожки размер, который занимает максимально необходимое пространство с учетом содержимого элемента сетки.+Ключевое слово **max-content** устанавливает для дорожки размер, который занимает максимально необходимое пространство с учетом содержимого элемента сетки.
  
-min-content позволяет занимать минимальное пространство, необходимое для этого содержимого, при этом ширина элемента ориентируется на самое длинное слово или на самое широкое изображение.+**min-content** позволяет занимать минимальное пространство, необходимое для этого содержимого, при этом ширина элемента ориентируется на самое длинное слово или на самое широкое изображение.
  
-Функция minmax(min,max) определяет диапазон размеров, больше или равный min и меньше или равный max. Если max < min, то max игнорируется, а minmax(min,max) обрабатывается как min. Значения в fr можно устанавливать только как максимальное.+Функция **minmax(min,max)** определяет диапазон размеров, больше или равный min и меньше или равный max.   
 +__Если max < min, то max игнорируется, а minmax(min,max) обрабатывается как min__.   
 +__Значения в **fr** можно устанавливать только как максимальное__.
  
 Варианты Варианты
Строка 70: Строка 71:
 } }
 ``` ```
- 
  
 ### 3.1.4. Автоматические размеры ### 3.1.4. Автоматические размеры
  
-Значение auto ориентируется на содержимое элементов сетки одной дорожки. Как минимум, рассматривается как минимальный размер элемента сетки, как определено min-width или min-height. Как максимум, обрабатывается так же, как и max-content. Может растягиваться за счет свойств align-content и justify-content.+Значение **auto** ориентируется на содержимое элементов сетки одной дорожки. Как минимум, рассматривается как минимальный размер элемента сетки, как определено min-width или min-height. Как максимум, обрабатывается так же, как и max-content. Может растягиваться за счет свойств align-content и justify-content.
  
 Синтаксис Синтаксис
Строка 84: Строка 84:
 } }
 ``` ```
- 
  
 ### 3.1.5. Соответствие содержимому ### 3.1.5. Соответствие содержимому
  
-Размеры дорожек можно задавать с помощью значения fit-content(длина или %), представляющее собой формулу min(maximum size, max(minimum size, argument)), которая вычисляется как minmax(auto, max-content), то есть auto. При этом, размер дорожки ограничивается значением, указанным в скобках, и если оно больше, чем автоматический минимум.+Размеры дорожек можно задавать с помощью значения **fit-content(длина или %)**, представляющее собой формулу min(maximum size, max(minimum size, argument)), которая вычисляется как minmax(auto, max-content), то есть auto. При этом, размер дорожки ограничивается значением, указанным в скобках, и если оно больше, чем автоматический минимум.
  
 Синтаксис Синтаксис
Строка 97: Строка 96:
 } }
 ``` ```
- 
 ### 3.1.6. Повтор строк и столбцов ### 3.1.6. Повтор строк и столбцов
  
 Нотация repeat() представляет повторяющийся фрагмент списка дорожек, что позволяет записать в более компактной форме большое количество одинаковых по размерам столбцов или строк. Общая форма синтаксиса следующая: Нотация repeat() представляет повторяющийся фрагмент списка дорожек, что позволяет записать в более компактной форме большое количество одинаковых по размерам столбцов или строк. Общая форма синтаксиса следующая:
  
-`repeat(число или auto-fill или auto-fit, повторяющаяся дорожка)`+``` 
 +repeat(число или auto-fill или auto-fit, повторяющаяся дорожка) 
 +```
  
 Синтаксис Синтаксис
Строка 130: Строка 130:
  
 Используя значение auto-fill, вы всегда получите хотя бы один столбец, даже если он по какой-то причине не помещается в контейнер-сетку. Если вы используете auto-fit, то дорожки, которые не содержат элементы сетки, будут сброшены. Используя значение auto-fill, вы всегда получите хотя бы один столбец, даже если он по какой-то причине не помещается в контейнер-сетку. Если вы используете auto-fit, то дорожки, которые не содержат элементы сетки, будут сброшены.
- 
  
 ## 3.2. Именованные области: свойство grid-template-areas ## 3.2. Именованные области: свойство grid-template-areas
Строка 168: Строка 167:
  
 Размещение элементов сетки с помощью именованных областей: Размещение элементов сетки с помощью именованных областей:
 +
 +[[Grid Layout|{{css:grid:grid-areas.png}}]]
 +
 ```css ```css
 .grid-container { .grid-container {
Строка 196: Строка 198:
 } }
 ``` ```
- 
- 
 ## 3.3. Сокращенная запись явного объявления сетки: свойство grid-template ## 3.3. Сокращенная запись явного объявления сетки: свойство grid-template
  
Строка 238: Строка 238:
 ``` ```
  
-Функция repeat() не разрешена для определения списка дорожек в этом свойстве, если используются именованные области сетки (сетка просто не будет отрисована).+:!: Функция repeat() не разрешена для определения списка дорожек в этом свойстве, если используются именованные области сетки (сетка просто не будет отрисована). 
 + 
 + 
 +## 3.4. Неявная сетка 
 +### 3.4.1. Автоматическое создание дорожек сетки: свойства grid-auto-rows и grid-auto-columns
  
-3.4. Неявная сетка 
-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 |Значение по умолчанию. | 
 +|размер дорожки + |В качестве размера дорожки может использоваться любое значение, допустимое для задания размеров дорожек сетки.|
  
-Значения:  +[[Grid Layout|{{css:grid:grid-auto-rows.png}}]]
-auto Значение по умолчанию. +
-размер дорожки + В качестве размера дорожки может использоваться любое значение, допустимое для задания размеров дорожек сетки. +
-grid-auto-rows.png+
  
 +```css
 .grid-container { .grid-container {
   max-width: 710px;   max-width: 710px;
Строка 286: Строка 290:
   grid-row: 3;   grid-row: 3;
 } }
-3.4.2. Автоматическое размещение: свойство grid-auto-flow+``` 
 +` 
 +### 3.4.2. Автоматическое размещение: свойство grid-auto-flow 
 Элементы сетки, которые не размещены явно, автоматически помещаются в незанятое пространство в контейнере-сетке с помощью алгоритма автоматического размещения. Элементы сетки, которые не размещены явно, автоматически помещаются в незанятое пространство в контейнере-сетке с помощью алгоритма автоматического размещения.
  
Строка 295: Строка 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
 .grid-container { .grid-container {
   max-width: 710px;   max-width: 710px;
Строка 322: Строка 329:
   grid-row: span 2;   grid-row: span 2;
 } }
-3.5. Сокращенная запись сетки: свойство grid+``` 
 + 
 +## 3.5. Сокращенная запись сетки: свойство grid 
 Свойство grid задает все явные grid-template-rows, grid-template-columns и grid-template-areas и все неявные свойства сетки grid-auto-flow, grid-auto-rows и grid-auto-columns в одном объявлении. Оно не сбрасывает свойства row-gap/column-gap. Его синтаксис соответствует grid-template, а также дополнительной синтаксической форме для определения автоматического размещения элементов сетки: Свойство grid задает все явные grid-template-rows, grid-template-columns и grid-template-areas и все неявные свойства сетки grid-auto-flow, grid-auto-rows и grid-auto-columns в одном объявлении. Оно не сбрасывает свойства row-gap/column-gap. Его синтаксис соответствует grid-template, а также дополнительной синтаксической форме для определения автоматического размещения элементов сетки:
  
Строка 330: Строка 340:
  
 Варианты Варианты
 +```css
 /* значения для grid-template */ /* значения для grid-template */
 grid: none; grid: none;
Строка 351: Строка 361:
 grid: auto-flow 300px / repeat(3, [line1 line2 line3] 200px); grid: auto-flow 300px / repeat(3, [line1 line2 line3] 200px);
 grid: auto-flow dense 40% / [line1] minmax(20em, max-content); grid: auto-flow dense 40% / [line1] minmax(20em, max-content);
 +```
 +
 +
 +[[grid_elements|Продолжение]]
  
 +[[0_content|Оглавление]]
/var/www/html/dokuwiki/data/attic/css/grid/setting_the_grid.1677934012.txt.gz · Последнее изменение: (внешнее изменение)