grid-template

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since ⁨октябрь 2017 г.⁩.

Сокращённое CSS-свойствоgrid-template определяетколонки,ряды иобласти грид-раскладки.

Интерактивный пример

grid-template:  "a a a" 40px  "b c c" 40px  "b c c" 40px / 1fr 1fr 1fr;

grid-template:  "b b a" auto  "b b c" 2ch  "b b c" 1em / 20% 20px 1fr;

grid-template:  "a a ." minmax(50px, auto)  "a a ." 80px  "b b c" auto / 2em 3em auto;

<section>  <div>    <div>      <div>One</div>      <div>Two</div>      <div>Three</div>    </div>  </div></section>

#example-element {  border: 1px solid #c5c5c5;  display: grid;  grid-gap: 10px;  width: 200px;}#example-element :nth-child(1) {  background-color: rgba(0, 0, 255, 0.2);  border: 3px solid blue;  grid-area: a;}#example-element :nth-child(2) {  background-color: rgba(255, 0, 200, 0.2);  border: 3px solid rebeccapurple;  grid-area: b;}#example-element :nth-child(3) {  background-color: rgba(94, 255, 0, 0.2);  border: 3px solid green;  grid-area: c;}

Составные свойства

Это свойство является сокращённой формой записи для следующих 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 иgrid-auto-columns.
<'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(), поскольку предполагается, что ряды и колонки будут располагаться вместе другом с другом в стиле "ASCII-рисунков".

Примечание:Сокращённое свойствоgrid имеет тот же самый формат значений, но также сбрасывает неявные грид-свойства к их первоначальным значениям. Используйтеgrid (в отличие отgrid-template), чтобы предотвратить каскадирование этих значений по отдельности.

Формальное определение

Начальное значение	как и у каждого из подсвойств этого свойства: `grid-template-columns`:`none` `grid-template-rows`:`none` `grid-template-areas`:`none`
Применяется к	сеточные контейнеры
Наследуется	нет
Проценты	как и у каждого из подсвойств этого свойства: `grid-template-columns`: относятся к соответствующему размеру области содержимого `grid-template-rows`: относятся к соответствующему размеру области содержимого
Обработка значения	как и у каждого из подсвойств этого свойства: `grid-template-columns`: как указано, но с относительной длиной, конвертируемой в абсолютные длины `grid-template-rows`: как указано, но с относительной длиной, конвертируемой в абсолютные длины `grid-template-areas`: как указано
Animation type	как и у каждого из подсвойств этого свойства: `grid-template-columns`: simple list of length, percentage, or calc, provided the only differences are in the values of the length, percentage, or calc components in the list `grid-template-rows`: simple list of length, percentage, or calc, provided the only differences are in the values of the length, percentage, or calc components in the list `grid-template-areas`: discrete

Формальный синтаксис

grid-template =
none|
[<'grid-template-rows'> /<'grid-template-columns'>]|
[<line-names>?<string><track-size>?<line-names>?]+[ /<explicit-track-list>]?

<grid-template-rows> =
none|
<track-list>|
<auto-track-list>|
subgrid<line-name-list>?

<grid-template-columns> =
none|
<track-list>|
<auto-track-list>|
subgrid<line-name-list>?

<line-names> =
  '['<custom-ident>* ']'

<track-size> =
<track-breadth>|
minmax(<inflexible-breadth> ,<track-breadth>)|
fit-content(<length-percentage [0,∞]>)

<explicit-track-list> =
[<line-names>?<track-size>]+<line-names>?

<track-list> =
[<line-names>?[<track-size>|<track-repeat>]]+<line-names>?

<auto-track-list> =
[<line-names>?[<fixed-size>|<fixed-repeat>]]*<line-names>?<auto-repeat>[<line-names>?[<fixed-size>|<fixed-repeat>]]*<line-names>?

<line-name-list> =
[<line-names>|<name-repeat>]+

<track-breadth> =
<length-percentage [0,∞]>|
<flex [0,∞]>|
min-content|
max-content|
auto

<inflexible-breadth> =
<length-percentage [0,∞]>|
min-content|
max-content|
auto

<length-percentage> =
<length>|
<percentage>

<track-repeat> =
repeat([<integer [1,∞]>] ,[<line-names>?<track-size>]+<line-names>?)

<fixed-size> =
<fixed-breadth>|
minmax(<fixed-breadth> ,<track-breadth>)|
minmax(<inflexible-breadth> ,<fixed-breadth>)

<fixed-repeat> =
repeat([<integer [1,∞]>] ,[<line-names>?<fixed-size>]+<line-names>?)

<auto-repeat> =
repeat([auto-fill|auto-fit] ,[<line-names>?<fixed-size>]+<line-names>?)

<name-repeat> =
repeat([<integer [1,∞]>|auto-fill] ,<line-names>+)

<fixed-breadth> =
<length-percentage [0,∞]>

Примеры

Создание грид-раскладки

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>  <header>Шапка</header>  <nav>Навигация</nav>  <main>Основной контент</main>  <footer>Подвал</footer></section>

Результат

Спецификации

Specification
CSS Grid Layout Module Level 2 # explicit-grid-shorthand

Совместимость с браузерами

Смотрите также

Связанные CSS-свойства:grid-template-rows,grid-template-columns,grid-template-areas
Руководство по грид-раскладке:Расположение элементов по грид-линиям с помощью CSS Grid
Руководство по грид-раскладке:Шаблоны грид-областей - сокращённое определение грида
Обучающее видео:Grid Template shorthand

Help improve MDN

Learn how to contribute

This page was last modified on⁨18 нояб. 2025 г.⁩ byMDN contributors.

View this page on GitHub •Report a problem with this content

Movatterモバイル変換

grid-template

CSS

HTML

Результат

Help improve MDN