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 class="default-example" id="default-example">
 <div class="example-container">
 <div class="transition-all" id="example-element">
 <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 id="page">
 <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 ⁨24 июн. 2025 г.⁩ by MDN contributors.

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