W3docs
ru
Войти

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

Узнайте, как CSS grid-row-gap задаёт отступ между строками сетки: синтаксис, значения, примеры и советы по использованию псевдонима row-gap.

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

Это свойство влияет только на элементы, у которых display равен grid или inline-grid. Оно не действует на Flexbox или многоколоночные макеты; для них используйте стандартное свойство column-gap или универсальное сокращение gap.

Информация

grid-row-gap теперь является псевдонимом стандартного свойства row-gap, которое работает в CSS Grid, Flexbox и многоколоночных макетах. Браузеры обрабатывают их одинаково в контексте сетки. В новом коде предпочтительно использовать row-gap (или сокращение grid-gap, задающее оба направления сразу). grid-row-gap остаётся допустимым и поддерживается для обратной совместимости.

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

Начальное значениеnormal (обрабатывается как 0 в сетке)
Применяется кГрид-контейнерам
НаследуетсяНет
АнимируетсяДа
СпецификацияCSS Grid Layout Module Level 1
DOM-синтаксисelement.style.gridRowGap = "30px"

Когда использовать

Используйте grid-row-gap, когда нужно обеспечить предсказуемые вертикальные промежутки между строками сетки без применения полей (margin) на отдельных элементах. Поля между элементами сетки неудобны — они коллапсируют непоследовательно, добавляют пространство по краям и их сложнее изменять глобально. Отступ строк, напротив, располагается только между строками и сохраняет внешние края сетки вровень, что делает управление отступами простым и понятным.

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

Синтаксис

/* keyword */
grid-row-gap: normal;

/* absolute length */
grid-row-gap: 20px;
grid-row-gap: 1.5em;

/* percentage of the container's block size */
grid-row-gap: 10%;

/* global values */
grid-row-gap: inherit;
grid-row-gap: initial;
grid-row-gap: unset;

Значения

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

Примеры

Без отступа строк (по умолчанию)

При grid-row-gap: 0 строки располагаются вплотную друг к другу без вертикального промежутка. Только grid-column-gap разделяет элементы по горизонтали.

<!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: 20px;
        grid-row-gap: 0;
        background-color: #666;
        padding: 10px;
      }
      .grid-container > div {
        background-color: #eee;
        text-align: center;
        padding: 20px 0;
        font-size: 30px;
      }
    </style>
  </head>
  <body>
    <h2>Grid-row-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 class="box8">8</div>
    </div>
  </body>
</html>
Попробуйте сами »

![Пример CSS grid-row-gap без отступа строк](/uploads/media/default/0001/04/4123ae945c3b6e7b25f0fc5911ae459f604c3c1c.png "Пример CSS grid-row-gap без отступа строк" =420x)

Фиксированный отступ в пикселях

Установка grid-row-gap: 40px добавляет промежуток в 40 пикселей между каждой парой строк. Отступ между столбцами остаётся отдельным и управляется независимо через grid-column-gap.

<!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: 20px;
        grid-row-gap: 40px;
        background-color: #666;
        padding: 10px;
      }
      .grid-container > div {
        background-color: #eee;
        text-align: center;
        padding: 20px 0;
        font-size: 30px;
      }
    </style>
  </head>
  <body>
    <h2>Grid-row-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>
Попробуйте сами »

Отступ в процентах

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

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .grid-container {
        display: grid;
        grid-template-columns: auto auto auto;
        grid-row-gap: 15%;
        grid-column-gap: 3%;
        background-color: grey;
        padding: 40px;
      }
      .grid-container > div {
        background-color: white;
        text-align: center;
        padding: 25px;
        font-size: 20px;
      }
    </style>
  </head>
  <body>
    <div class="grid-container">
      <div>1</div>
      <div>2</div>
      <div>3</div>
      <div>4</div>
      <div>5</div>
    </div>
  </body>
</html>
Попробуйте сами »

Переход на современный row-gap

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

/* Legacy — still valid, but prefer row-gap in new code */
grid-row-gap: 20px;

/* Modern equivalent */
row-gap: 20px;

/* Shorthand: sets row-gap and column-gap at once */
gap: 20px 10px;   /* row-gap: 20px; column-gap: 10px */
gap: 20px;        /* both row-gap and column-gap: 20px */

Все основные браузеры поддерживают row-gap для сетки с начала 2020 года, поэтому практических причин использовать имя grid-row-gap в новых проектах нет.

Распространённые ошибки

  • Процентные отступы и внутренняя высота. Если у грид-контейнера нет явно заданной height, браузер не может вычислить процентный отступ строк до тех пор, пока не узнает высоту контейнера, которая в свою очередь зависит от содержимого. Эта циклическая зависимость может привести к тому, что отступ разрешится в 0. Используйте px или rem, если только контейнер не имеет фиксированной высоты.
  • Отрицательные значения не допускаются. В отличие от полей, grid-row-gap принимает только нулевые или положительные значения. Попытка задать отрицательный отступ является недопустимой, и объявление игнорируется.
  • Отступ не добавляет внешнее пространство. grid-row-gap добавляет пространство только между строками. Если нужен отступ вокруг всей сетки, используйте свойство padding контейнера.
  • На растянутые элементы это не влияет. Элемент, охватывающий несколько строк с помощью grid-row: span 2, по-прежнему учитывает отступы между этими строками как часть своего выделенного пространства.

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

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

Практика

Практика
Какова цель свойства 'grid-row-gap' в CSS?
Какова цель свойства 'grid-row-gap' в CSS?
Was this page helpful?