W3docs
ru
Войти

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

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

Свойство grid-column-gap задаёт размер отступа (пустого пространства) между столбцами в раскладке CSS Grid. Оно управляет только горизонтальными промежутками между дорожками столбцов — отступы на внешних краях контейнера сетки не добавляются.

Значение может быть фиксированной длиной (например, px, rem или em) или процентом. При использовании процентов значение вычисляется относительно инлайн-размера (ширины) контейнера сетки.

Внимание

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

Зачем использовать gap вместо отступов?

До появления gap-свойств разработчики создавали промежутки между элементами сетки с помощью margin, а затем были вынуждены убирать лишний отступ, «вытекавший» на первый и последний элементы. grid-column-gap решает эту задачу элегантно: промежуток появляется только между дорожками столбцов, поэтому сетка остаётся вровень с контейнером с обеих сторон. Кроме того, браузер сохраняет одинаковый промежуток при увеличении или уменьшении дорожек, чего нельзя гарантировать при использовании отступов.

Справочник по свойству

СвойствоЗначение
Начальное значениеnormal (эквивалентно 0 в сетке)
Применяется кконтейнерам Grid
НаследуетсяНет
АнимируемоеДа
ВерсияCSS Grid Layout Module Level 1
DOM-синтаксисobject.style.gridColumnGap = "30px"

Синтаксис

grid-column-gap: <length-percentage> | normal | initial | inherit;
  • <length-percentage> — неотрицательное значение в px, em, rem, ch, vw или %. Отрицательные значения недопустимы.
  • normal — значение браузера по умолчанию, которое в контексте сетки равно 0.
  • initial — сбрасывает свойство до начального значения (normal).
  • inherit — наследует вычисленное значение от родительского элемента (редко полезно, поскольку grid-column-gap не наследуется).

Примеры

Фиксированный промежуток (px)

Наиболее распространённый случай: фиксированный пиксельный промежуток, который не изменяется в зависимости от ширины контейнера.

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .grid-container {
        display: grid;
        grid-template-columns: auto auto auto auto;
        grid-column-gap: 30px;
        grid-row-gap: 10px;
        background-color: #666;
        padding: 10px;
      }
      .grid-container > div {
        background-color: #ccc;
        text-align: center;
        padding: 20px 0;
        font-size: 30px;
      }
    </style>
  </head>
  <body>
    <h2>Grid-column-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-column-gap: четырёхколоночная сетка с промежутком 30px между столбцами и промежутком 10px между строками

Двенадцать элементов распределяются по четырём столбцам; каждый столбец отделён от следующего на 30px, а grid-row-gap: 10px сохраняет расстояние между строками.

Процентный промежуток (%)

Процентное значение вычисляется относительно инлайн-размера (ширины) контейнера сетки. Отступы увеличиваются и уменьшаются при изменении размера контейнера.

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .grid-container {
        display: grid;
        grid-template-columns: auto auto auto auto;
        grid-column-gap: 20%;
        grid-row-gap: 10px;
        background-color: #666;
        padding: 10px;
      }
      .grid-container > div {
        background-color: #ccc;
        text-align: center;
        padding: 20px 0;
        font-size: 30px;
      }
    </style>
  </head>
  <body>
    <h2>Grid-column-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>
Попробуйте сами »

Процентные промежутки редко дают ожидаемый результат: при трёх промежутках по 20% они одни занимают 60% контейнера — оставляя лишь 40% для четырёх дорожек столбцов с auto. Фиксированные значения (px, rem, em) обеспечивают значительно более предсказуемые отступы.

Переход на современный синтаксис

Замена — это прямое переименование: значение остаётся тем же, меняется только имя свойства:

.grid-container {
  display: grid;
  grid-template-columns: repeat(4, 1fr);

  /* Deprecated — avoid in new code */
  grid-column-gap: 30px;

  /* Modern equivalent */
  column-gap: 30px;

  /* Or set both axes at once with the gap shorthand */
  /* gap: <row-gap> <column-gap>; */
  gap: 10px 30px;
}

gap: 10px 30px эквивалентно row-gap: 10px; column-gap: 30px;. Передача одного значения — gap: 30px — применяет его как к строкам, так и к столбцам. Сокращение gap также работает внутри Flexbox-контейнеров, что делает его наиболее универсальным выбором.

Взаимодействие промежутков с единицами fr

Когда промежуток используется вместе со столбцами в fr, браузер вычитает всё пространство промежутков из доступной ширины до распределения долей fr. Это означает, что промежутки никогда не влияют на соотношение между дорожками:

.grid {
  display: grid;
  /* Three equal columns; gaps come out of available space first */
  grid-template-columns: repeat(3, 1fr);
  column-gap: 24px; /* modern equivalent of grid-column-gap: 24px */
}

Если контейнер имеет ширину 300px и существует два промежутка по 24px, оставшиеся 252px делятся поровну: каждый столбец равен 84px. Именно поэтому дорожки в fr в сочетании с фиксированным column-gap (или grid-column-gap) обеспечивают более предсказуемые раскладки, чем процентные промежутки.

Значения

ЗначениеОписание
<length>Фиксированный промежуток в px, em, rem и др. Отрицательные значения недопустимы.
<percentage>Процент от инлайн-размера (ширины) контейнера сетки.
normalЗначение браузера по умолчанию, равное 0 внутри сетки.
initialСбрасывает до начального значения (normal).
inheritИспользует вычисленное значение родительского элемента.

Практика

Практика
Какова цель свойства 'column-gap' в раскладке CSS Grid?
Какова цель свойства 'column-gap' в раскладке CSS Grid?

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

  • column-gap — современная замена данного свойства.
  • gap — сокращение для одновременной установки промежутков между строками и столбцами.
  • grid-row-gap — соответствующее свойство для вертикальных промежутков между строками.
  • grid-template-columns — определяет дорожки столбцов, между которыми располагаются промежутки.
  • grid-template-rows — определяет дорожки строк, на которые воздействует grid-row-gap.
  • grid — сокращение, превращающее элемент в контейнер сетки.
Was this page helpful?