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

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


css:grid:creating_a_grid-container

Это старая версия документа!


# 2. Создание контейнера-сетки: значения grid и inline-grid свойства display

Для создания макета на основе сетки необходимо определить контейнер-сетку.

Контейнер-сетка (grid container) — это блок, который устанавливает контекст форматирования по типу сетки, то есть создает область с сеткой, а дочерние элементы располагаются в соответствии с правилами компоновки сетки, а не блочной компоновки.

Контейнер-сетка бывает двух видов: обычный display: grid и встроенный display: inline-grid. Первый генерирует grid-контейнер уровня блока, второй — grid-контейнер уровня строки.

:!: Контейнеры-сетки не являются блочными контейнерами, поэтому *некоторые CSS-свойства не работают в контексте макета сетки*:

- float и clear игнорируются элементами сетки (но не самим контейнером-сеткой). - vertical-align не влияет на элементы сетки. - Псевдоэлементы ::first-line и ::first-letter не применяются к контейнеру-сетке и его потомкам. - Если контейнер-сетка является контейнером уровня строки display: inline-grid и для него заданы обтекание или абсолютное позиционирование, то вычисляемое значение свойства display будет grid.

Продолжение

/var/www/html/dokuwiki/data/attic/css/grid/creating_a_grid-container.1689262715.txt.gz · Последнее изменение: (внешнее изменение)