Перевод не завершен. Пожалуйста, помогите перевести эту статью с английского.

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

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

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

Начальное значениекак и у каждого из подсвойств этого свойства:
Применяется ксеточные контейнеры
Наследуетсянет
Процентыкак и у каждого из подсвойств этого свойства:
  • 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: процент, как указан, или аблосютная длина
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 (шаблон сетки) включая 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-template'> | <'grid-template-rows'> / [ auto-flow && dense? ] <'grid-auto-columns'>? | [ auto-flow && dense? ] <'grid-auto-rows'>? / <'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' в этой спецификации.
Кандидат в рекомендации Начальное определение

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

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!

Feature Chrome Edge Firefox (Gecko) Internet Explorer Opera Safari
Basic support 57.0[1] Нет[3] 52.0 (52.0)[2] Нет[3] 44[4] Нет[5]
Feature Android Webview Chrome for Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Basic support 57.0[1] 57.0[1] 52.0 (52.0)[2] Нет[3] Нет

[1] Реализован до  функциональных возможностей экспериментальной веб-платформы в chrome://flags начиная с Chrome 29.0.

[2] Реализован за преимуществом layout.css.grid.enabled начиная с Gecko 40.0 (Firefox 40.0 / Thunderbird 40.0 / SeaMonkey 2.37), имея значение по умолчанию false. Насиная с  Gecko 52.0 включено по умолчанию.

[3] Internet Explorer и Edge реализуют старую версию спецификации, которая не поддерживает сокращенную форму записи grid. Смотри request for updating the implementation.

[4] Реализован до  функциональных возможностей экспериментальной веб-платформы в chrome://flags начиная с Opera 28.0.

[5] Экспериментальная реализация доступна в Safari Technological Preview.

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

Метки документа и участники

 Внесли вклад в эту страницу: coshturnina, Dragon220, misterybray, BomberNastya
 Обновлялась последний раз: coshturnina,