css властивість grid-gap
Властивість grid-gap використовується для скороченого запису grid-column-gap і grid-row-gap, для визначення розміру жолобів між стовпцями та рядками сітки відповідно. Це зручний спосіб встановити сіткові жолоби, не прописуючи кожну властивість окремо.
Приклад використання властивості:
grid-gap: 16px;
/* ідентично до */
grid-gap-rows: 16px;
grid-gap-columns: 16px;
Таким чином, для рядків та стовпців встановлюється жолоб (одне значення).
Якщо ви прописуєте два значення, перше значення встановлює жолоб для рядків, друге значення встановлює жолоб для стовпців:
grid-gap: 16px 32px;
/* ідентично до */
grid-gap-rows: 16px;
grid-gap-columns: 32px;
| Нотатка: | Зверніть увагу, що властивість |
Синтаксис
grid-gap: <'grid-row-gap'> <'grid-column-gap'>;Властивість grid-gap може отримувати одне значення:
<grid-row-gap> <grid-column-gap>значення довжини, для
grid-column-gapіgrid-row-gapвідповідно
| Значення без задання: | 0 (для обох підвластивостей) |
|---|---|
| Наслідує: | Ні |
| Анімується: | Так |
| JavaScript синтаксис: | object.style.gridGap |
Переглядачі
| Переглядач | ||||||
|---|---|---|---|---|---|---|
| basic support | 66.0 |
Не підтримується |
61.0 |
10.1 |
53.0 |
16.0 |
66.0 |
Не підтримується |
52.0 |
Не підтримується |
53.0 |
16.0 |
|
| calc() values | 66.0 |
Не підтримується |
52.0 |
Не підтримується |
53.0 |
Не підтримується |
| Переглядач | |||
|---|---|---|---|
| basic support | 66.0 |
61.0 |
10.3 |
66.0 |
52.0 |
Не підтримується |
|
| calc() values | 66.0 |
52.0 |
Не підтримується |
Мобільних переглядачів ще не додано.
Приклади
Динамічний приклад
Динамічний приклад
Демонстрація роботи
Синтаксис
.box {
grid-gap: 16px 75%;
}