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

Властивість grid-row-gap встановлює відступи між рядками сітки.

Ви можете використовувати grid-column-gap для встановлення відступів між стовпчиками або ви можете використовувати властивість grid-gap, щоб одночасно встановити відступи як для рядків, так і для стовпців.

Негативні значення не використовуються.

правити

Нотатка

Зверніть увагу, що властивість grid онулює ці відступи.

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

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

Синтаксис

grid-row-gap: <length-percentage>;

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

<length-percentage>

Ширина жолоба, що відокремлює рядки у сітці

автор: Svitlana

правити

Переглядачі

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

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

Переглядач
grid-row-gap	57.0	52.0	10.0	44.0	16.0	Не підтримується

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

Переглядач
grid-row-gap	57.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-row-gap: 10px;
}

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