Пошук уроків, статей та іншого контенту
Дізнаємося, як створювати проміжки між рядками й колонками за допомогою gap, row-gap і column-gap.
gapВластивість gap задає проміжки між елементами всередині контейнера:
у CSS Grid — між рядками та колонками;
у Flexbox — між елементами або лініями переносу.
На відміну від margin, gap не додає зовнішній відступ навколо контейнера. Він створює проміжки саме між його дочірніми елементами.
.container {
display: grid;
gap: 20px;
}У цьому прикладі між усіма елементами контейнера буде проміжок 20px.
gapЗначення gap можна вказати одним або двома значеннями.
.container {
gap: 16px;
}Одне значення створює однаковий проміжок:
між рядками;
між колонками.
.container {
gap: 12px 24px;
}Перше значення задає проміжок між рядками, а друге — між колонками:
.container {
row-gap: 12px;
column-gap: 24px;
}Отже, запис:
gap: 12px 24px;є скороченням для:
row-gap: 12px;
column-gap: 24px;row-gapВластивість row-gap задає проміжок між рядками.
.grid {
row-gap: 20px;
}Це корисно, коли вертикальний проміжок має відрізнятися від горизонтального.
column-gapВластивість column-gap задає проміжок між колонками.
.grid {
column-gap: 30px;
}Наприклад, у сітці можна зробити невеликі проміжки між рядками та більші — між колонками:
.grid {
row-gap: 12px;
column-gap: 24px;
}gap у CSS GridРозглянемо сітку з трьома колонками:
<!DOCTYPE html>
<html lang="uk">
<head>
<meta charset="UTF-8">
<title>Приклад gap</title>
<style>
* {
box-sizing: border-box;
}
body {
margin: 0;
padding: 24px;
font-family: Arial, sans-serif;
background-color: #f2f4f7;
}
.products {
display: grid;
grid-template-columns: repeat(3, 1fr);
row-gap: 16px;
column-gap: 24px;
max-width: 900px;
margin: 0 auto;
}
.product {
padding: 24px;
border-radius: 8px;
background-color: white;
box-shadow: 0 2px 8px rgb(0 0 0 / 10%);
}
.product h2 {
margin: 0 0 8px;
}
.product p {
margin: 0;
}
</style>
</head>
<body>
<main class="products">
<article class="product">
<h2>Ноутбук</h2>
<p>Для роботи та навчання.</p>
</article>
<article class="product">
<h2>Монітор</h2>
<p>Чітке зображення для щоденних завдань.</p>
</article>
<article class="product">
<h2>Клавіатура</h2>
<p>Зручний набір тексту.</p>
</article>
<article class="product">
<h2>Миша</h2>
<p>Точне керування курсором.</p>
</article>
<article class="product">
<h2>Навушники</h2>
<p>Якісний звук для роботи.</p>
</article>
<article class="product">
<h2>Вебкамера</h2>
<p>Для відеозустрічей.</p>
</article>
</main>
</body>
</html>У контейнері .products:
grid-template-columns: repeat(3, 1fr);створює три колонки.
row-gap: 16px;
column-gap: 24px;задає:
16px між рядками;
24px між колонками.
Можна записати те саме коротше:
gap: 16px 24px;gap у Flexboxgap також працює з контейнерами, які мають:
display: flex;<div class="menu">
<a href="#">Головна</a>
<a href="#">Про нас</a>
<a href="#">Послуги</a>
<a href="#">Контакти</a>
</div>.menu {
display: flex;
gap: 20px;
}
.menu a {
color: #1d4ed8;
text-decoration: none;
}Між посиланнями буде проміжок 20px.
Для Flexbox із переносом елементів можна окремо налаштувати проміжки між елементами та рядками:
.tags {
display: flex;
flex-wrap: wrap;
gap: 8px 12px;
}У цьому прикладі:
8px — проміжок між рядками;
12px — проміжок між елементами в одному рядку.
<div class="tags">
<span>HTML</span>
<span>CSS</span>
<span>JavaScript</span>
<span>Accessibility</span>
<span>Responsive Design</span>
</div>.tags {
display: flex;
flex-wrap: wrap;
gap: 8px 12px;
max-width: 300px;
}
.tags span {
padding: 6px 10px;
border-radius: 4px;
background-color: #dbeafe;
}Для gap можна використовувати різні одиниці:
.grid {
gap: 20px;
}.grid {
gap: 1rem;
}.grid {
gap: 5%;
}Найчастіше використовують:
px — фіксований проміжок;
rem — проміжок, пов’язаний із розміром шрифту;
% — проміжок у відсотках від розміру контейнера.
Також можна використовувати CSS-змінну:
:root {
--space: 16px;
}
.grid {
gap: var(--space);
}gap і marginДля створення проміжків між елементами можна використовувати margin, але gap часто є зручнішим рішенням для Grid і Flexbox.
За допомогою margin доводиться задавати відступи окремим елементам:
.card {
margin-right: 16px;
}А за допомогою gap достатньо налаштувати контейнер:
.cards {
display: flex;
gap: 16px;
}gap має кілька переваг:
не потрібно вибирати окремі елементи;
не виникає зайвого відступу після останнього елемента;
правило зберігається в контейнері;
однаково працює для всіх дочірніх елементів.
display: grid або display: flexСам по собі gap не перетворює контейнер на сітку або Flexbox.
Неправильно:
.cards {
gap: 20px;
}Правильно:
.cards {
display: grid;
gap: 20px;
}або:
.cards {
display: flex;
gap: 20px;
}У записі з двома значеннями:
gap: 10px 30px;перше значення — це проміжок між рядками, друге — між колонками.
Це еквівалентно:
row-gap: 10px;
column-gap: 30px;gap створює проміжки між дочірніми елементами, але не додає відступ навколо контейнера.
Якщо потрібен простір навколо всього контейнера, використовуйте padding або margin:
.container {
padding: 20px;
gap: 16px;
}margin разом із gapЯкщо для одних і тих самих проміжків одночасно використовувати gap і margin, відстані можуть стати більшими, ніж очікувалося.
Спочатку спробуйте налаштувати проміжки через gap, а додаткові margin додавайте лише за потреби.
gap створює проміжки між дочірніми елементами Grid або Flexbox.
row-gap задає проміжок між рядками.
column-gap задає проміжок між колонками.
Одне значення gap застосовується і до рядків, і до колонок.
Два значення записуються у форматі gap: рядки колонки.
Для роботи gap контейнер має використовувати display: grid або display: flex.
gap не створює зовнішнього відступу навколо контейнера.