grid-template
Сокращённое CSS-свойство grid-template
определяет колонки, ряды (en-US) и области (en-US) грид-раскладки.
Интерактивный пример
Составные свойства
Это свойство является сокращённой формой записи для следующих CSS-свойств:
Синтаксис
css
/* Ключевые слова в качестве значения */
grid-template: none;
/* Значения в формате grid-template-rows / grid-template-columns */
grid-template: 100px 1fr / 50px 1fr;
grid-template: auto 1fr / auto 1fr auto;
grid-template: [linename] 100px / [columnname1] 30% [columnname2] 70%;
grid-template: fit-content(100px) / fit-content(40%);
/* Значения в формате grid-template-areas grid-template-rows / grid-template-columns */
grid-template:
"a a a"
"b b b";
grid-template:
"a a a" 20%
"b b b" auto;
grid-template:
[header-top] "a a a" [header-bottom]
[main-top] "b b b" 1fr [main-bottom]
/ auto 1fr auto;
/* Глобальные значения */
grid-template: inherit;
grid-template: initial;
grid-template: revert;
grid-template: unset;
Значения
none
-
Это ключевое задаёт значение
none
для всех трёх связанных свойств, что означает отсутствие явно заданной грид-раскладки. Соответственно, грид-области будут неименованными. Ряды и колонки будут создаваться неявным образом, а их размер определяться свойствамиgrid-auto-rows
(en-US) иgrid-auto-columns
(en-US). <'grid-template-rows'> / <'grid-template-columns'>
-
Задаёт указанные значения для
grid-template-rows
иgrid-template-columns
, а для свойстваgrid-template-areas
― значениеnone
. [ <line-names>? <string> <track-size>? <line-names>? ]+ [ / <explicit-track-list> ]?
-
Перечисленные строки задают свойство
grid-template-areas
, значения после каждой строки устанавливают размеры грид-полос для свойстваgrid-template-rows
(либоauto
в случае их отсутствия), объединяя именованные грид-линии, расположенные до и после каждого размера, далее определяетсяgrid-template-columns
значениями, расположенными после слеша (либоnone
в случае их отсутствия).
Примечание: при перечислении грид-полос нельзя использовать функцию repeat()
(en-US), поскольку предполагается, что ряды и колонки будут располагаться вместе другом с другом в стиле "ASCII-рисунков".
Примечание: сокращённое свойство grid
имеет тот же самый формат значений, но также сбрасывает неявные грид-свойства к их первоначальным значениям. Используйте grid
(в отличие от grid-template
), чтобы предотвратить каскадирование этих значений по отдельности.
Формальное определение
Начальное значение | как и у каждого из подсвойств этого свойства:
|
---|---|
Применяется к | сеточные контейнеры |
Наследуется | нет |
Проценты | как и у каждого из подсвойств этого свойства:
|
Обработка значения | как и у каждого из подсвойств этого свойства:
|
Animation type | как и у каждого из подсвойств этого свойства:
|
Формальный синтаксис
grid-template =
none | (en-US)
[ (en-US) <'grid-template-rows'> / <'grid-template-columns'> ] (en-US) | (en-US)
[ (en-US) <line-names>? (en-US) <string> (en-US) <track-size>? (en-US) <line-names>? (en-US) ] (en-US)+ (en-US) [ (en-US) / <explicit-track-list> ] (en-US)? (en-US)
<line-names> =
'[' <custom-ident>* (en-US) ']'
<track-size> =
<track-breadth> | (en-US)
minmax( <inflexible-breadth> , <track-breadth> ) | (en-US)
fit-content( <length-percentage> )
<explicit-track-list> =
[ (en-US) <line-names>? (en-US) <track-size> ] (en-US)+ (en-US) <line-names>? (en-US)
<track-breadth> =
<length-percentage> | (en-US)
<flex> | (en-US)
min-content | (en-US)
max-content | (en-US)
auto
<inflexible-breadth> =
<length-percentage> | (en-US)
min-content | (en-US)
max-content | (en-US)
auto
<length-percentage> =
<length> | (en-US)
<percentage>
Примеры
Создание грид-раскладки
CSS
css
#page {
display: grid;
width: 100%;
height: 200px;
grid-template:
[header-left] "head head" 30px [header-right]
[main-left] "nav main" 1fr [main-right]
[footer-left] "nav foot" 30px [footer-right]
/ 120px 1fr;
}
header {
background-color: lime;
grid-area: head;
}
nav {
background-color: lightblue;
grid-area: nav;
}
main {
background-color: yellow;
grid-area: main;
}
footer {
background-color: red;
grid-area: foot;
}
HTML
html
<section id="page">
<header>Шапка</header>
<nav>Навигация</nav>
<main>Основной контент</main>
<footer>Подвал</footer>
</section>
Результат
Спецификации
Specification |
---|
CSS Grid Layout Module Level 2 # explicit-grid-shorthand |
Поддержка браузерами
BCD tables only load in the browser
Смотрите также
- Связанные CSS-свойства:
grid-template-rows
,grid-template-columns
,grid-template-areas
- Руководство по грид-раскладке: Расположение элементов по грид-линиям с помощью CSS Grid
- Руководство по грид-раскладке: Шаблоны грид-областей - сокращённое определение грида
- Обучающее видео: Grid Template shorthand