Вертикальні відступи для плитки

Додаємо вертикальні відступи до flex-плитки за допомогою margin-bottom та розбираємо особливість зайвого відступу після останнього ряду.

Додаємо вертикальні відступи

У попередньому прикладі ми створили горизонтальні відступи за допомогою margin-right. Тепер додамо відстань між рядами. Для цього всім flex-елементам задамо margin-bottom: 10px.

.parent { display: flex; flex-wrap: wrap; width: 320px; border: 1px solid red; } .child { box-sizing: border-box; width: 100px; height: 100px; margin-right: 10px; margin-bottom: 10px; border: 1px solid green; } .child:nth-child(3n) { margin-right: 0; }

Зайвий відступ після останнього ряду

Є одна особливість такого підходу: margin-bottom додається не лише елементам між рядами, а й елементам останнього ряду.

┌──────────────────────────┐ │ 1 2 3 │ │ │ │ 4 5 6 │ │ │ ← 10px └──────────────────────────┘

Тому після останнього ряду залишається додатковий нижній відступ. У багатьох випадках це не критично, але якщо потрібно точно контролювати зовнішні відступи плитки, цей момент варто враховувати.

Як розрахувати ширину контейнера

Якщо в рядку має бути N елементів шириною W, а відстань між ними становить G, ширину контейнера можна розрахувати за формулою: N × W + (N − 1) × G.

Ширина = кількість елементів × ширина елемента + кількість проміжків × розмір проміжку Кількість проміжків = кількість елементів − 1

Підсумок

margin-right створює горизонтальні проміжки між елементами.
margin-bottom створює вертикальні проміжки між рядами.
:nth-child(3n) прибирає правий відступ у кожного третього елемента для трьох колонок.
Після останнього ряду залишається margin-bottom.
Ширина контейнера розраховується за кількістю колонок і горизонтальним проміжком.

❗ Важливо:

У сучасному CSS для створення таких проміжків часто зручніше використовувати gap. Але margin-підхід важливо знати, оскільки він добре демонструє принципи роботи відступів і вибору елементів через :nth-child().

Практичне завдання №1

📌 Завдання:

Створіть плитку по два елементи в ряд.
Встановіть відстань між елементами 20px.
Ширина кожного елемента — 100px.
Додайте вертикальну відстань між рядами 20px.

<!-- Початковий код --> <div class="parent"> <div class="child">1</div> <div class="child">2</div> <div class="child">3</div> <div class="child">4</div> <div class="child">5</div> <div class="child">6</div> </div>

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

Для двох колонок ширина контейнера: 2 × 100 + 1 × 20 = 220px. Для другого елемента кожного рядка приберіть margin-right.

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

.parent { display: flex; flex-wrap: wrap; width: 220px; } .child { box-sizing: border-box; width: 100px; height: 100px; margin-right: 20px; margin-bottom: 20px; } .child:nth-child(2n) { margin-right: 0; }

Практичне завдання №2

📌 Завдання:

Створіть плитку по три елементи в ряд.
Встановіть горизонтальну та вертикальну відстань 20px.
Ширина кожного елемента — 100px.

<!-- Початковий код --> <div class="parent"> <div class="child">1</div> <div class="child">2</div> <div class="child">3</div> <div class="child">4</div> <div class="child">5</div> <div class="child">6</div> <div class="child">7</div> </div>

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

Для трьох колонок ширина контейнера: 3 × 100 + 2 × 20 = 340px. Використайте :nth-child(3n).

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

.parent { display: flex; flex-wrap: wrap; width: 340px; } .child { box-sizing: border-box; width: 100px; height: 100px; margin-right: 20px; margin-bottom: 20px; } .child:nth-child(3n) { margin-right: 0; }

Практичне завдання №3

📌 Завдання:

Створіть плитку по чотири елементи в ряд.
Встановіть горизонтальну та вертикальну відстань 20px.
Ширина кожного елемента — 100px.

<!-- Початковий код --> <div class="parent"> <div class="child">1</div> <div class="child">2</div> <div class="child">3</div> <div class="child">4</div> <div class="child">5</div> <div class="child">6</div> <div class="child">7</div> <div class="child">8</div> <div class="child">9</div> </div>

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

Для чотирьох колонок ширина контейнера: 4 × 100 + 3 × 20 = 460px. Використайте :nth-child(4n).

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

.parent { display: flex; flex-wrap: wrap; width: 460px; } .child { box-sizing: border-box; width: 100px; height: 100px; margin-right: 20px; margin-bottom: 20px; } .child:nth-child(4n) { margin-right: 0; }