СВОЙСТВО GRID
Свойство grid включает в себя следующие свойства:
- grid-template-rows
- grid-template-columns
- grid-template-areas
- grid-auto-rows
- grid-auto-columns
- grid-auto-flow
Поддержка браузеров
| 16+ | ||||
Синтаксис
grid: none|grid-template-rows / grid-template-columns|grid-template-areas|grid-template-rows/[grid-auto-flow] grid-auto-columns|[grid-auto-flow] grid-auto-rows/grid-template-columns|initial|inherit
Значения свойства
| Значение | Описание |
|---|---|
| none | Размер колонок и столбцов не указан. Это значение по умолчанию. |
| grid-template-rows / grid-template-columns | Определяет размер колонок и столбцов. |
| grid-template-areas | Определяет именованные области сетки. |
| grid-template rows / grid-auto-columns | Определяет размер строк и автоматический размер столбцов. |
| grid-auto-rows / grid-template-columns | Определяет размер столбцов и автоматический размер строк. |
| grid-auto flow grid-auto-rows / grid-template-columns | Указывает, как размещать автоматически размещаемые элементы и автоматический размер строк, и задает свойство grid-template-columns. |
| initial | Устанавливает значение по умолчанию. |
| inherit | Унаследует значение свойства от родительского элемента. |
Песочница
<div class="grid">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
HTML
.grid {
display: grid;
grid: 60px 80px 100px / auto auto auto;
grid-gap: 15px;
background-color: #f1f1f1;
}
.item:nth-child(1) {background: yellow}
.item:nth-child(2) {background: blue}
.item:nth-child(3) {background: beige}
.item:nth-child(4) {background: yellow}
.item:nth-child(5) {background: blue}
.item:nth-child(6) {background: beige}
.item:nth-child(7) {background: yellow}
.item:nth-child(8) {background: blue}
.item:nth-child(9) {background: beige}
CSS