Перейти к содержанию

grid-gap

Свойство grid-gap - это сокращение для grid-row-gap и grid-column-gap.

Grid Layout

Синтаксис

/* One <length> value */
grid-gap: 20px;
grid-gap: 1em;
grid-gap: 3vmin;
grid-gap: 0.5cm;

/* One <percentage> value */
grid-gap: 16%;
grid-gap: 100%;

/* Two <length> values */
grid-gap: 20px 10px;
grid-gap: 1em 0.5em;
grid-gap: 3vmin 2vmax;
grid-gap: 0.5cm 2mm;

/* One or two <percentage> values */
grid-gap: 16% 100%;
grid-gap: 21px 82%;

/* Global values */
grid-gap: inherit;
grid-gap: initial;
grid-gap: unset;

Значения

Значение по-умолчанию:

Применяется к grid-контейнерам

Анимируется: да

<grid-row-gap> <grid-column-gap>
значения размеров;

Спецификации

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

Can I Use css-grid? Data on support for the css-grid feature across the major browsers from caniuse.com.

Описание и примеры

.container {
  grid-template-columns: 100px 50px 100px;
  grid-template-rows: 80px auto 80px;
  grid-gap: 10px 15px;
}

Если значение для grid-row-gap не задано, ему присваивается такое же значение как и у grid-column-gap.

См. также