Відстань між стовпцями в CSS Grid

Вивчаємо властивість column-gap, яка дозволяє задавати проміжки між стовпцями Grid-контейнера.

Відстань між стовпцями в CSS Grid

У CSS Grid можна керувати відстанню між стовпцями сітки. Для цього використовується властивість column-gap.

Властивість column-gap задається батьківському Grid-контейнеру і визначає проміжок між вертикальними лініями сітки.

<div id="parent">
  <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>

#parent {
  display: grid;
  column-gap: 20px;
  grid-template: 1fr 1fr 1fr / 1fr 1fr 1fr;
  padding: 10px;
  border: 2px solid #696989;
  width: 600px;
  height: 200px;
}

#parent > div {
  padding: 10px;
  border: 1px solid #696989;
}

У цьому прикладі Grid має три стовпці однакової ширини. Властивість column-gap додає між ними проміжок 20px.

Значення column-gap

Значення column-gap можна задавати у різних одиницях вимірювання: px, %, rem, fr та інших.

#parent {
  column-gap: 20%;
}

❗ Важливо:

column-gap впливає тільки на відстань між стовпцями. Для відстані між рядками використовується властивість row-gap.

column-gap задається Grid-батьку.
Властивість створює проміжки між стовпцями.
Значення можна задавати в px, %, rem та інших одиницях.
Для рядків використовується row-gap.

📌 Завдання:

№1. Створіть Grid-контейнер із дев'ятьма блоками.
№2. Зробіть три стовпці та три рядки.
№3. Додайте відстань між стовпцями 20%.
№4. Перевірте результат у браузері.

💡 Показати підказку

Використовуйте властивість column-gap у батьківському Grid-контейнері.

✅ Показати відповідь

#parent {
  display: grid;
  column-gap: 20%;
}