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-свойств:

• grid-template-areas
• grid-template-columns
• grid-template-rows

Синтаксис

/* Ключевые слова */ 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-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

#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

<section id="page"> <header>Шапка</header> <nav>Навигация</nav> <main>Основной контент</main> <footer>Подвал</footer> </section> 

Результат

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

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

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

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