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

Свойство grid-column-gap задаёт размер промежутка между колонками в макете CSS Grid.

Длина может быть указана как в пикселях, так и в процентах.

WARNING

Свойство grid-column-gap устарело. Вместо него используйте современное свойство column-gap или сокращённое свойство gap. Отрицательные значения не допускаются.

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

Синтаксис

Синтаксис свойства CSS grid-column-gap

css

grid-column-gap: length;

Пример использования свойства grid-column-gap:

Пример свойства CSS grid-column-gap со значением длины

html

<!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>

Try it Yourself »

Результат

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

Пример свойства grid-column-gap со значением в "%":

Пример свойства CSS grid-column-gap со значением в %

html

<!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>

Try it Yourself »

Values

Значение	Описание	Запустить
length	Промежуток между колонками указывается в пикселях или процентах. Отрицательные значения не допускаются.	Запустить »
initial	Заставляет свойство использовать значение по умолчанию.
inherit	Наследует свойство от родительского элемента.

Practice

Какова цель свойства 'column-gap' в макете CSS grid?

Оно задаёт размер промежутка между колонками.Оно задаёт размер промежутка между строками.Оно определяет цвет линий сетки.До введения свойства 'gap' свойство 'column-gap' использовалось для создания промежутков.Оно выравнивает элементы сетки вдоль оси колонок.

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

Синтаксис ​

Пример использования свойства grid-column-gap: ​

Результат ​

Пример свойства grid-column-gap со значением в "%": ​

Values ​

Practice ​

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

Синтаксис

Пример использования свойства grid-column-gap:

Результат

Пример свойства grid-column-gap со значением в "%":

Values

Practice