grid-template

Baseline Широко доступно

Эта функция хорошо зарекомендовала себя и работает на многих устройствах и версиях браузеров. Она доступна во всех браузерах с октября 2017 года.

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

Попробуйте

Составляющие свойства

Это свойство является сокращением для следующих свойств CSS:

Синтаксис

/* Keyword value */
grid-template: none;

/* grid-template-rows / grid-template-columns values */
grid-template: 100px 1fr / 50px 1fr;
grid-template: auto 1fr / auto 1fr auto;
grid-template: [line-name] 100px / [column-name1] 30% [column-name2] 70%;
grid-template: fit-content(100px) / fit-content(40%);

/* grid-template-areas grid-template-rows / grid-template-column values */
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;

/* Global values */
grid-template: inherit;
grid-template: initial;
grid-template: revert;
grid-template: revert-layer;
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`: как указано
Тип анимации	как каждое из свойств сокращения: `grid-template-columns`: простой список длин, процентов или calc, при условии, что единственные различия находятся в значениях компонентов длины, процента или calc в списке `grid-template-rows`: простой список длин, процентов или calc, при условии, что единственные различия находятся в значениях компонентов длины, процента или calc в списке `grid-template-areas`: дискретный

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

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

<div id="page">
  <header>Header</header>
  <nav>Navigation</nav>
  <main>Main area</main>
  <footer>Footer</footer>
</div>

Результат

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

Спецификация
CSS Grid Layout Module Level 2 # explicit-grid-shorthand

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

	Рабочий стол					Мобильные устройства
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox для Android	Opera Android	Safari на iOS	Samsung Internet	WebView Android
`grid-template`	57	16	52	44	10.1	57	52	43	10.3	6.0	57
`none`	57	79	52	44	10.1	57	52	43	10.3	7.0	57

См. также

© 2005–2024 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template