Відстань між рядами в CSS Grid

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

Відстань між рядами в CSS Grid

У CSS Grid можна керувати не тільки відстанню між стовпцями, а й проміжками між рядами.

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

<div id="parent">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

#parent {
  display: grid;
  row-gap: 10px;
  padding: 10px;
  border: 2px solid #696989;
  width: 600px;
  height: 200px;
}

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

У цьому прикладі між рядками Grid створюється проміжок 10px. Елементи залишаються у своїх комірках, але між ними з'являється відстань.

Значення row-gap

Властивість row-gap може приймати різні одиниці вимірювання: px, %, rem та інші.

#parent {
  row-gap: 25%;
}

Значення у відсотках створює проміжок, який залежить від розміру Grid-контейнера.

❗ Важливо:

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

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

📌 Завдання:

№1. Створіть Grid-таблицю з кількома елементами.
№2. Додайте властивість row-gap.
№3. Встановіть відстань між рядами 25%.
№4. Перевірте результат у браузері.

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

Для створення проміжків між рядами використовуйте row-gap у батьківському Grid-контейнері.

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

#parent {
  display: grid;
  row-gap: 25%;
}