grid-row-gap CSS

Свойство grid-row-gap определяет размер ширины линий. Вы можете думать об этом, как о настройке ширины отступов между строками.

Свойство **`grid-row-gap`** определяет размер ширины линий. Вы можете думать об этом, как о настройке ширины отступов между строками.
Значение по умолчанию:

0

Значение по умолчанию:
`0`
Наследуется:
Нет
Анимируется:
Да
Спецификации:
Спецификации:
* [CSS Grid Layout](https://drafts.csswg.org/css-grid/#propdef-grid-column-gap)
Поддержка браузерами:

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

Поддержка браузерами:
<p class="ciu_embed" data-feature="css-grid" data-periods="future_1,current,past_1,past_2"> <a href="http://caniuse.com/#feat=css-grid">Can I Use css-grid?</a> Data on support for the css-grid feature across the major browsers from caniuse.com. </p>

Синтаксис

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

/* <percentage> value */
grid-column-gap: 10%;

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

Синтаксис

/* <length> values */ grid-column-gap: 20px; grid-column-gap: 1em; grid-column-gap: 3vmin; grid-column-gap: 0.5cm; /* <percentage> value */ grid-column-gap: 10%; /* Global values */ grid-column-gap: inherit; grid-column-gap: initial; grid-column-gap: unset;

Значения

  • <line-size> — значение размера;

Значения

* `<line-size>` — значение размера;

Примеры

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

CSS Grid row gap
CSS Grid row gap

Отступы создаются только между колонками и строками, но не для внешних краев сетки.

Примеры

.container { grid-template-columns: 100px 50px 100px; grid-template-rows: 80px auto 80px; grid-column-gap: 10px; grid-row-gap: 15px; } ![CSS Grid row gap](/workspace/uploads/css/grid-column-row-gap_1.png) Отступы создаются только между колонками и строками, но не для внешних краев сетки.

Содержание

  • Синтаксис
      /* <length> values */ grid-column-gap: 20px; grid-column-gap: 1em; grid-column-gap: 3vmin; grid-column-gap: 0.5cm; /* <percentage> value */ grid-column-gap: 10%; /* Global values */ grid-column-gap: inherit; grid-column-gap: initial; grid-column-gap: unset;
  • Значения
    • Примеры
        .container { grid-template-columns: 100px 50px 100px; grid-template-rows: 80px auto 80px; grid-column-gap: 10px; grid-row-gap: 15px; } ![CSS Grid row gap](/workspace/uploads/css/grid-column-row-gap_1.png) Отступы создаются только между колонками и строками, но не для внешних краев сетки.

    В начало