CSS row-gap — відстань між рядками grid і flex

CSS властивість row-gap задає проміжок між рядками grid- або flex-контейнера.

правити

Загальний опис

Це половина від gap: вона відповідає лише за вертикальні проміжки, тоді як за горизонтальні відповідає column-gap.

Окремо її беруть тоді, коли рядки й колонки мають різні відступи, а писати скорочення незручно — наприклад, коли значення для колонок приходить із змінної.

правити

Порада

У більшості випадків простіше написати скорочення gap: 2rem 1rem — перше значення і є row-gap.

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

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

Синтаксис

row-gap: normal | <length> | <percentage>;

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

length

Фіксований проміжок між рядками.

автор: NagarD

правити

percentage

Проміжок у відсотках від висоти контейнера.

автор: NagarD

правити

normal

Типовий проміжок.

автор: NagarD

правити

Переглядачі

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

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

Переглядач
row-gap	84+	63+	14.1+	70+	84+	-

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

Переглядач
row-gap	84+	yes	yes	14.5+

Приклади

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

<div class="grid">
    <div>1</div><div>2</div>
    <div>3</div><div>4</div>
</div>

.grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    row-gap: 3rem;
    column-gap: .5rem;
}