Свойство CSS grid-gap

Определение и использование

Свойство grid-gap определяет размер интервала между строками и столбцами в сеточной разметке и является сокращением следующих свойств:

Внимание:Этот атрибут в CSS3 был переименован в gap.

См. также:

CSS учебник:CSS сеточная разметка

CSS справочник:Свойство grip-row-gap

CSS справочник:Свойство grip-column-gap

Пример

Пример 1

Установите краткое значение интервала между строками и столбцами 50 пикселей:

.grid-container {
  grid-gap: 50px;
}

Попробуйте сами

Пример 2

Установите интервал между строками 20 пикселей и между столбцами 50 пикселей:

.grid-container {
  grid-gap: 20px 50px;
}

Попробуйте сами

Синтаксис CSS

grid-gap: grid-row-gap grid-column-gap;

Значение свойства

Значение Описание
grid-row-gap Установите размер интервала между строками в сеточной разметке. Значение по умолчанию равно 0.
grid-column-gap Установите размер интервала между столбцами. Значение по умолчанию равно 0.

Технические детали

Значение по умолчанию: 0 0
наследование: нет
Создание анимации: Поддерживается. См. также:Свойства анимации.
Версия: Модуль CSS Grid Layout Level 1
JavaScript синтаксис: object.style.gridGap="50px 100px"

Поддержка браузерами

Числа в таблице указывают на первую версию браузера, которая полностью поддерживает этот атрибут.

Chrome IE / Edge Firefox Safari Opera
57 16 52 10 44