В треках ( строки и столбцы ) по сетке объявлены и размеру либо в явном виде через явные сетки свойств или неявно создаются , когда элементы расположены вне явной сетки . Сетки обсчитывать и его подпункты свойства определяют параметры сетки. §7 Определение сетки
Ниже приведены некоторые примеры объявлений сетки:
- Далее объявляет сетку с четырьмя названных областях: H, A, B, и F. Размер первого столбца соответствует его содержимому ( авто ), а второй столбец занимает оставшееся пространство ( 1fr ). По умолчанию для строк используется автоматическое (основанное на контенте) определение размера; последний ряд имеет фиксированный размер 30 пикселей .основной { сетка: "ЧЧ" "AB" "FF" 30px / auto 1fr; }
- Следующее объявляет сетку с таким количеством строк по крайней мере 5em, которое поместится в высоту контейнера сетки ( 100vh ). Сетка не имеет явных столбцов; вместо того чтобы столбцы добавлялись по мере добавления контента, результирующие ширины столбцов выравнивались ( 1fr ). Поскольку содержимое, переполненное вправо, не будет печататься, альтернативный макет для печати добавляет строки.основной { сетка: повтор (автозаполнение, 5em) / автопоток 1fr; высота: 100vh; } @media print { основной { сетка: автопоток 1fr / repeat (автозаполнение, 5em); } }
- Следующее объявляет сетку с 5 столбцами одинакового размера и тремя рядами, причем средний ряд занимает все оставшееся пространство (и, по крайней мере, достаточно, чтобы вместить его содержимое).основной { сетка: авто 1fr авто / повтор (5, 1fr); минимальная высота: 100vh; }