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