Общие сведения

Свойство CSSgrid является сокращённой формой записи, которая устанавливает значения для всех явных свойств сетки (grid) (grid-template-rows,grid-template-columns, иgrid-template-areas), всех неявных свойств сетки (grid) (grid-auto-rows,grid-auto-columns, иgrid-auto-flow), и свойств для промежутков между рядами и столбцами сетки (grid-column-gap иgrid-row-gap) в одной строчке.

Синтаксис

/* <'grid-template'> значения*/grid: none;grid: "a" 100px "b" 1fr;grid: [linename1] "a" 100px [linename2];grid: "a" 200px "b" min-content;grid: "a" minmax(100px, max-content) "b" 20%;grid: 100px / 200px;grid: minmax(400px, min-content) / repeat(auto-fill, 50px);/* <'grid-template-rows'> /   [ auto-flow && dense? ] <'grid-auto-columns'>? values */grid: 200px / auto-flow;grid: 30% / auto-flow dense;grid: repeat(3, [line1 line2 line3] 200px) / auto-flow 300px;grid: [line1] minmax(20em, max-content) / auto-flow dense 40%;/* [ auto-flow && dense? ] <'grid-auto-rows'>? /   <'grid-template-columns'> values */grid: auto-flow / 200px;grid: auto-flow dense / 30%;grid: auto-flow 300px / repeat(3, [line1 line2 line3] 200px);grid: auto-flow dense 40% / [line1] minmax(20em, max-content);/* Global values */grid: inherit;grid: initial;grid: unset;

Значения

<'grid-template'>

Определяетgrid-template (шаблон сетки) включаяgrid-template-columns (столбцы),grid-template-rows (ряды) иgrid-template-areas (области).

<'grid-template-rows'> / [ auto-flow && dense? ] <'grid-auto-columns'>?

Устанавливает auto-flow явно задавая размещение по рядам с помощью свойстваgrid-template-rows (и устанавливая свойствоgrid-template-columns в значениеnone) и уточняет, как должно работать авто-повторение столбцов при помощи свойстваgrid-auto-columns (и устанавливаяgrid-auto-rows в значениеauto). Свойствоgrid-auto-flow может быть так же установлено для столбцов со свойствомdense если оно определено.Все остальные подсвойства grid сбрасываются в их начальные значения .

[ auto-flow && dense? ] <'grid-auto-rows'>? / <'grid-template-columns'>

Устанавливает auto-flow явно задавая размещение по столбцам с помощью свойстваgrid-template-columns (и устанавливая свойствоgrid-template-rows в значениеnone) и уточняет, как должно работать авто-повторение рядов при помощи свойстваgrid-auto-rows (и устанавливаяgrid-auto-columns в значениеauto). Свойствоgrid-auto-flow может быть так же установлено для рядов со свойствомdense если оно определено.Все остальные подсвойства grid сбрасываются в их начальные значения .

Formal syntax

grid =
<'grid-template'>|
<'grid-template-rows'> /[auto-flow&&dense?]<'grid-auto-columns'>?|
[auto-flow&&dense?]<'grid-auto-rows'>? /<'grid-template-columns'>

<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-auto-columns> =
<track-size>+

<grid-auto-rows> =
<track-size>+

<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,∞]>

Example

HTML Content

<div>  <div></div>  <div></div>  <div></div>  <div></div>  <div></div>  <div></div>  <div></div>  <div></div></div>

CSS Content

#container {  display: grid;  grid: repeat(2, 60px) / auto-flow 80px;}#container > div {  background-color: #8ca0ff;  width: 50px;  height: 50px;}

Результат

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

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

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

• Связанные свойства CSS:grid-template,grid-template-rows,grid-template-columns,grid-template-areas,grid-auto-columns,grid-auto-rows,grid-auto-flow
• Руководство по разметке сетки:Line-based placement with CSS Grid
• Руководство по разметке сетки:Grid template areas - Grid definition shorthands