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 могут быть описаны свойства только одного вида: явные или неявные. Подсвойства, которые не были описаны, принимают, как и в других сокращённых формах записи свойств, значения по умолчанию. Кроме того, при помощи сокращённой формы записи значения свойств для промежутков между рядами и столбцами сетки по умолчанию сбрасываются, несмотря на то, что они не могут быть установлены в сокращённой форме записи.
Начальное значение | как и у каждого из подсвойств этого свойства:
|
---|---|
Применяется к | сеточные контейнеры |
Наследуется | нет |
Проценты | как и у каждого из подсвойств этого свойства:
|
Обработка значения | как и у каждого из подсвойств этого свойства:
|
Animation type | discrete |
Синтаксис
/* <'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' в этой спецификации. |
Кандидат в рекомендации | Начальное определение |
Совместимость с браузерами
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.
Смотрите также
- Связанные свойства CSS:
grid-template
(en-US),grid-template-rows
,grid-template-columns
,grid-template-areas
,grid-auto-columns
(en-US),grid-auto-rows
(en-US),grid-auto-flow
- Руководство по разметке сетки: Line-based placement with CSS Grid
- Руководство по разметке сетки: Grid template areas - Grid definition shorthands