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 онулює ці жолоби.

автор: Svitlana правити

+ додати пораду чи нотатку

Синтаксис

grid-gap: <'grid-row-gap'> <'grid-column-gap'>;

Властивість grid-gap може отримувати єдине значення:

<grid-row-gap> <grid-column-gap>

значення довжини, для grid-column-gap і grid-row-gap відповідно

автор: Svitlana

правити

Переглядачі

Стаціонарні переглядачі Мобільні переглядачі

Підтримка: стаціонарні переглядачі

Переглядач
	57	52	10.1	44	16	—
<percentage> values	66.0	52.0	Не підтримується	53.0	16.0	Не підтримується
calc() values	66.0	52.0	Не підтримується	53.0	Не підтримується	Не підтримується

Підтримка: мобільні переглядачі

Переглядач
	57	57	52	10.3
<percentage> values	66.0		52.0	Не підтримується
calc() values	66.0		52.0	Не підтримується

Приклади

+ запропонувати свій приклад у пісочниці

<div class="box">
    <div>1</div><div>2</div><div>3</div>
    <div>4</div><div>5</div><div>6</div>
</div>

.box {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-gap: 16px 24px;
}

.box div {
    background: #0172ad;
    color: #fff;
    padding: 8px;
}