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 October 2017.

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

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

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

Это свойство является сокращённой формой записи для следующих 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: относятся к соответствующему размеру области содержимого
  • 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

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

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
grid-template
none

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support

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