grid

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 является сокращённой формой записи, которая устанавливает значения для всех явных свойств сетки (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 могут быть описаны свойства только одного вида: явные или неявные. Подсвойства, которые не были описаны, принимают, как и в других сокращённых формах записи свойств, значения по умолчанию. Кроме того, при помощи сокращённой формы записи значения свойств для промежутков между рядами и столбцами сетки по умолчанию сбрасываются, несмотря на то, что они не могут быть установлены в сокращённой форме записи.

Начальное значение	как и у каждого из подсвойств этого свойства: `grid-template-rows`: `none` `grid-template-columns`: `none` `grid-template-areas`: `none` `grid-auto-rows`: `auto` `grid-auto-columns`: `auto` `grid-auto-flow`: `row` `grid-column-gap`: `0` `grid-row-gap`: `0` `column-gap`: `normal` `row-gap`: `normal`
Применяется к	сеточные контейнеры
Наследуется	нет
Проценты	как и у каждого из подсвойств этого свойства: `grid-template-rows`: относятся к соответствующему размеру области содержимого `grid-template-columns`: относятся к соответствующему размеру области содержимого `grid-auto-rows`: относятся к соответствующему размеру области содержимого `grid-auto-columns`: относятся к соответствующему размеру области содержимого
Обработка значения	как и у каждого из подсвойств этого свойства: `grid-template-rows`: как указано, но с относительной длиной, конвертируемой в абсолютные длины `grid-template-columns`: как указано, но с относительной длиной, конвертируемой в абсолютные длины `grid-template-areas`: как указано `grid-auto-rows`: процент, как указан, или абсолютная длина `grid-auto-columns`: процент, как указан, или абсолютная длина `grid-auto-flow`: как указано `grid-column-gap`: процент, как указан, или абсолютная длина `grid-row-gap`: процент, как указан, или абсолютная длина `column-gap`: as specified, with <length>s made absolute, and normal computing to zero except on multi-column elements `row-gap`: as specified, with <length>s made absolute, and normal computing to zero except on multi-column elements
Animation type	как и у каждого из подсвойств этого свойства: `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-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-areas`: discrete `grid-auto-rows`: by computed value type `grid-auto-columns`: by computed value type `grid-auto-flow`: discrete `grid-column-gap`: длина `grid-row-gap`: длина `column-gap`: длина, проценты или calc(); `row-gap`: длина, проценты или calc();

Синтаксис

css

/* <'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

html

<div id="container">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

CSS Content

css

#container {
  display: grid;
  grid: repeat(2, 60px) / auto-flow 80px;
}

#container > div {
  background-color: #8ca0ff;
  width: 50px;
  height: 50px;
}

Результат

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

Specification
CSS Grid Layout Module Level 2 # grid-shorthand

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

BCD tables only load in the browser

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

Связанные свойства 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