grid

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2020.

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

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

Примечание: В одной строке grid могут быть описаны свойства только одного вида: явные или неявные. Подсвойства, которые не были описаны, принимают, как и в других сокращённых формах записи свойств, значения по умолчанию. Кроме того, при помощи сокращённой формы записи значения свойств для промежутков между рядами и столбцами сетки по умолчанию сбрасываются, несмотря на то, что они не могут быть установлены в сокращённой форме записи.

Начальное значениекак и у каждого из подсвойств этого свойства:
Применяется ксеточные контейнеры
Наследуетсянет
Процентыкак и у каждого из подсвойств этого свойства:
  • grid-template-rows: относятся к соответствующему размеру области содержимого
  • grid-template-columns: относятся к соответствующему размеру области содержимого
  • grid-auto-rows (en-US): относятся к соответствующему размеру области содержимого
  • grid-auto-columns (en-US): относятся к соответствующему размеру области содержимого
Обработка значениякак и у каждого из подсвойств этого свойства:
  • grid-template-rows: как указано, но с относительной длиной, конвертируемой в абсолютные длины
  • grid-template-columns: как указано, но с относительной длиной, конвертируемой в абсолютные длины
  • grid-template-areas: как указано
  • grid-auto-rows (en-US): процент, как указан, или абсолютная длина
  • grid-auto-columns (en-US): процент, как указан, или абсолютная длина
  • grid-auto-flow: как указано
  • grid-column-gap (en-US): процент, как указан, или абсолютная длина
  • grid-row-gap (en-US): процент, как указан, или абсолютная длина
  • 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как и у каждого из подсвойств этого свойства:

Синтаксис

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 (en-US) (и устанавливая grid-auto-rows (en-US) в значение 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 (en-US) (и устанавливая grid-auto-columns (en-US) в значение auto). Свойство grid-auto-flow может быть так же установлено для рядов со свойством dense если оно определено.Все остальные подсвойства grid сбрасываются в их начальные значения .

Formal syntax

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

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

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