This page was translated from English by the community. Learn more and join the MDN Web Docs community.

grid

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

Свойство 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)) в одной строчке.

Note: В одной строке 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 (en-US): as specified, with <length>s made absolute, and normal computing to zero except on multi-column elements
  • row-gap (en-US): as specified, with <length>s made absolute, and normal computing to zero except on multi-column elements
Animation typediscrete

Синтаксис

/* <'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 (en-US) (шаблон сетки) включая 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-template'> (en-US) | (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) [ (en-US) auto-flow && (en-US) dense? (en-US) ] (en-US) <'grid-auto-rows'> (en-US)? (en-US) / <'grid-template-columns'>

Example

HTML Content

<div id="container">
  <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 Layout
Определение 'grid' в этой спецификации.		 Кандидат в рекомендации Начальное определение

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

BCD tables only load in the browser

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