css властивість grid-column-gap

Властивість grid-column-gap встановлює відступи між стовпчиками сітки.

Ви можете використовувати grid-row-gap для встановлення відступів між рядами або ви можете використовувати властивість grid-gap, щоб одночасно встановити відступи як для рядків, так і для стовпців.

Негативні значення не використовуються.

правити

Нотатка

Зверніть увагу, що властивість grid онулює ці відступи.

автор: Svitlana правити

+ додати пораду чи нотатку

Синтаксис

grid-column-gap: <length-percentage>;

Властивість grid-column-gap може отримувати єдине значення:

<length-percentage>

Ширина жолоба, що відокремлює стовпці у сітці

автор: Svitlana

правити

Переглядачі

Стаціонарні переглядачі Мобільні переглядачі

Підтримка: стаціонарні переглядачі

Переглядач
grid-column-gap	66.0	61.0	10.1	53.0	16.0	16.0

Підтримка: мобільні переглядачі

Переглядач
grid-column-gap	66.0	61.0	10.3

Приклади

+ запропонувати свій приклад у пісочниці

<div class="box">
    <div>1</div><div>2</div><div>3</div>
    <div>4</div><div>5</div><div>6</div>
</div>

.box {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-column-gap: 10px;
}

.box div {
    background: #0172ad;
    color: #fff;
    padding: 8px;
    border: 1px solid #fff;
}