css властивість grid-gap


Властивість grid-gap використовується для скороченого запису grid-column-gap і grid-row-gap, для визначення розміру жолобів між стовпцями та рядками сітки відповідно. Це зручний спосіб встановити сіткові жолоби, не прописуючи кожну властивість окремо.

Властивість `grid-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 онулює ці жолоби.

Синтаксис

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

values

66.0

Не підтримується

52.0

Не підтримується

53.0

16.0

calc() values

66.0

Не підтримується

52.0

Не підтримується

53.0

Не підтримується

Переглядач
basic support

66.0

61.0

10.3

values

66.0

52.0

Не підтримується

calc() values

66.0

52.0

Не підтримується


Мобільних переглядачів ще не додано.

Приклади


Динамічний приклад

Динамічний приклад

Демонстрація роботи

Синтаксис

.box {


  grid-gap: 16px 75%;


}

Додаткові посилання