CSS grid-gap Свойство
Пример
Установите зазор между строками и столбцами в 50px:
.grid-container {
grid-gap: 50px;
}
Определение и использование
grid-gap
свойство определяет размер зазора между строками и столбцами в макете сетки и является сокращенным свойством для следующих свойств:
Значение по умолчанию: | 0 0 |
---|---|
Inherited: | no |
Animatable: | yes. Читайте о animatable |
Version: | Модуль макета сетки CSS уровень 1 |
Синтаксис JavaScript: | object.style.gridGap="50px 100px" |
Поддержка браузера
Номера в таблице указывают первую версию браузера, которая полностью поддерживает свойство.
Свойство | |||||
---|---|---|---|---|---|
grid-gap | 57 | 16 | 52 | 10 | 44 |
Синтаксис CSS
grid-gap: grid-row-gap grid-column-gap;
Значения свойств
Значение | Описание | |
---|---|---|
grid-row-gap | Задает размер зазора между строками в макете сетки. 0 — значение по умолчанию | |
grid-column-gap | Задает размер зазора между столбцами в макете сетки. 0 — значение по умолчанию |
Другие примеры
Пример
Установите зазор между строками в 20px и столбцы для 50px:
.grid-container {
grid-gap: 20px 50px;
}
Похожие страницы
CSS Справочник: CSS Grid Layout
CSS Справка: grip-row-gap Свойство
CSS Справка: grip-column-gap Свойство