W3docs
ru
Войти

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

Свойство CSS grid-gap задаёт размер отступа между строками и столбцами сетки. Смотрите примеры использования.

Свойство grid-gap задаёт размер отступа (промежутка) между строками и столбцами grid-макета. Отступ — это пустое пространство между треками сетки; он никогда не добавляет пространство по внешним краям сетки, поэтому внешние отступы определяются собственным padding-ом контейнера.

grid-gap является сокращением для двух полных свойств:

  • grid-row-gap — размер отступа между строками.
  • grid-column-gap — размер отступа между столбцами.

grid-gap и gap

Стандартное свойство gap заменило grid-gap. Оба ведут себя идентично внутри grid-контейнера, однако grid-gap считается устаревшим: оно существует главным образом для старых браузеров, которые реализовали версию с префиксом grid до стандартизации gap без префикса. Современные браузеры по-прежнему поддерживают grid-gap как псевдоним, поэтому существующие таблицы стилей продолжают работать.

Для новых проектов предпочтительнее использовать gap — оно работает как в grid-, так и в flexbox-макетах, тогда как grid-gap применялось исключительно к сеткам:

/* Legacy (grid only) */
.grid { display: grid; grid-gap: 20px 40px; }

/* Modern, preferred */
.grid { display: grid; gap: 20px 40px; }
Начальное значение0
Применяется кGrid-контейнерам.
НаследуетсяНет.
АнимируемоеДа. grid-gap поддерживает анимацию.
ВерсияCSS Grid Layout Module Level 1
DOM-синтаксисobject.style.gridGap = "30px 70px";

Синтаксис

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

grid-gap: <row-gap> <column-gap>;

Свойство принимает одно или два значения длины:

  • Одно значение задаёт одинаковый размер отступа для строк и столбцов.
  • Два значения задают сначала отступ между строками, затем между столбцами (grid-gap: 20px 40px; означает отступ 20px между строками и 40px между столбцами).

Каждое значение может быть любым неотрицательным значением длины (px, em, rem и т.д.) или процентом. Ключевые слова initial и inherit также допустимы.

Пример свойства grid-gap:

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

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .grid-container {
        display: grid;
        grid-template-columns: auto auto auto auto;
        grid-gap: 60px;
        background-color: #ccc;
        padding: 10px;
      }
      .grid-container > div {
        background-color: #666;
        text-align: center;
        padding: 20px 0;
        font-size: 30px;
      }
    </style>
  </head>
  <body>
    <h2>Grid-gap property example</h2>
    <div class="grid-container">
      <div>1</div>
      <div>2</div>
      <div>3</div>
      <div>4</div>
      <div>5</div>
      <div>6</div>
      <div>7</div>
      <div>8</div>
      <div>9</div>
      <div>10</div>
      <div>11</div>
      <div>12</div>
    </div>
  </body>
</html>
Попробуйте сами »

Результат

![CSS свойство grid-gap](/uploads/media/default/0001/04/91075707603fef2480969077540f999b813f30aa.png "Сетка с отступом 60px между каждой строкой и столбцом" =420x)

Пример свойства grid-gap, заданного в процентах:

Процентный отступ вычисляется относительно собственных размеров grid-контейнера — отступ столбца составляет процент от ширины контейнера, а отступ строки — процент от его высоты. Проценты удобны для резиновых макетов, но промежуток увеличивается вместе с контейнером, поэтому фиксированные значения длины обычно более предсказуемы.

Пример grid-контейнера, где отступ задан в процентах

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .grid-container {
        display: grid;
        grid-template-columns: auto auto auto auto;
        grid-gap: 20%;
        background-color: #ccc;
        padding: 10px;
      }
      .grid-container > div {
        background-color: #666;
        text-align: center;
        padding: 20px 0;
        font-size: 30px;
      }
    </style>
  </head>
  <body>
    <h2>Grid-gap property example</h2>
    <div class="grid-container">
      <div>1</div>
      <div>2</div>
      <div>3</div>
      <div>4</div>
      <div>5</div>
      <div>6</div>
      <div>7</div>
      <div>8</div>
    </div>
  </body>
</html>
Попробуйте сами »

Пример свойства grid-gap с двумя значениями:

При передаче двух значений первое задаёт отступ между строками, второе — между столбцами. Здесь строки разделены 20px, а столбцы — 80px:

Пример CSS свойства grid-gap

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .grid-container {
        display: grid;
        grid-template-columns: auto auto auto auto;
        grid-gap: 20px 80px;
        background-color: #ccc;
        padding: 10px;
      }
      .grid-container > div {
        background-color: #666;
        text-align: center;
        padding: 20px 0;
        font-size: 30px;
      }
    </style>
  </head>
  <body>
    <h2>Grid-gap property example</h2>
    <div class="grid-container">
      <div>1</div>
      <div>2</div>
      <div>3</div>
      <div>4</div>
      <div>5</div>
      <div>6</div>
      <div>7</div>
      <div>8</div>
      <div>9</div>
      <div>10</div>
      <div>11</div>
      <div>12</div>
    </div>
  </body>
</html>
Попробуйте сами »

Значения

ЗначениеОписаниеПопробуйте
grid-row-gapЗадаёт размер отступа между строками в grid-макете. Значение по умолчанию — 0. При использовании синтаксиса с двумя значениями соответствует первому.
grid-column-gapЗадаёт размер отступа между столбцами в grid-макете. Значение по умолчанию — 0. При использовании синтаксиса с двумя значениями соответствует второму.Попробуйте »
initialУстанавливает значение свойства по умолчанию.
inheritНаследует свойство от родительского элемента.

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

grid-gap поддерживается во всех современных браузерах. Поскольку это псевдоним стандартного свойства gap, как правило, не нужно использовать оба сразу. Если необходима поддержка очень старых реализаций сетки, можно перечислить grid-gap для них и gap для всего остального:

.grid {
  display: grid;
  grid-gap: 20px;  /* fallback for legacy browsers */
  gap: 20px;       /* standard property wins where supported */
}

Связанные свойства

  • grid-row-gap и grid-column-gap — полные свойства, которые объединяет grid-gap.
  • grid — сокращение для всего grid-макета.
  • grid-template-columns — определяет столбцы, между которыми располагаются отступы.

Практика

Практика
Для чего используется свойство 'grid-gap' в CSS?
Для чего используется свойство 'grid-gap' в CSS?
Was this page helpful?