Відступи в плитці з автоматичною шириною блоків

Як додати горизонтальні та вертикальні відступи до Flexbox-плитки з блоками, ширина яких залежить від ширини батьківського контейнера.

Проблема з відступами

Якщо зробити чотири блоки по 25% ширини та додати їм правий margin, їхня сумарна ширина разом із відступами перевищить 100%. Через це блоки можуть переноситися на наступний ряд.


        .child {
          width: 25%;
          margin-right: 1.5%;
          margin-bottom: 1.5%;
          }
        .child:nth-child(4n) {
          margin-right: 0;
          }

Як розрахувати правильну ширину

Якщо потрібно розмістити 4 блоки в ряд і залишити між ними відступ 1.5%, між блоками буде 3 відступи. Тому із ширини кожного блока потрібно відняти частину, яка припадає на ці відступи.

Формула: ширина блока = 100% / кількість блоків − загальний горизонтальний відступ / кількість блоків.


        100% / 4 - (1.5% × 3) / 4 = 25% - 1.125% = 23.875%

Розрахунок за допомогою calc()

Щоб не виконувати розрахунки вручну, можна використати функцію calc(). Вона дозволяє браузеру обчислити ширину блока безпосередньо під час відображення сторінки.


        .child {
          width: calc(100% / 4 - 1.5% * 3 / 4);
          margin-right: 1.5%;
          margin-bottom: 1.5%;
          }
        .child:nth-child(4n) {
          margin-right: 0;
          }

Як змінити кількість блоків

У формулі потрібно враховувати кількість блоків у рядку. Якщо блоків 3, використовуємо 100% / 3. Якщо 5 — 100% / 5.


        
      /* 3 блоки, відступ 3% */
        .child {
          width: calc(100% / 3 - 3% * 2 / 3);
          }
      /* 6 блоків, відступ 0.5% */
        .child {
          width: calc(100% / 6 - 0.5% * 5 / 6);
          }

Якщо відступ заданий у пікселях

Відступ можна задавати не тільки у відсотках, а й у пікселях. У такому випадку calc() дозволяє відняти від ширини контейнера потрібну кількість пікселів.


      /* 4 блоки, відступ 30px */ 
        .child {
           width: calc((100% - 30px * 3) / 4);
           margin-right: 30px;
           margin-bottom: 30px;
          }
        .child:nth-child(4n) {
           margin-right: 0;
          }

❗ Важливо:

Для N блоків у рядку буде N − 1 горизонтальних відступів. Саме їхню загальну ширину потрібно відняти від 100% ширини контейнера.

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

📌 Завдання:

Задайте блокам ширину у відсотках так, щоб у плитці було 3 блоки в ряд.
Відстань між блоками має становити 3%.


        .child {
          width: /* ваш код */;
          margin-right: 3%;
          margin-bottom: 3%;
          }
        .child:nth-child(3n) {
          margin-right: 0;
          }

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

У рядку буде 3 блоки, тому між ними буде 2 відступи. Використайте calc().

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


        .child {
          width: calc(100% / 3 - 3% * 2 / 3);
          margin-right: 3%;
          margin-bottom: 3%;
          }
        .child:nth-child(3n) {
          margin-right: 0;
          }

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

📌 Завдання:

Задайте блокам ширину у відсотках так, щоб у плитці було 6 блоків у ряд.
Відстань між блоками має становити 0.5%.


        .child {
           width: /* ваш код */;
           margin-right: 0.5%;
           margin-bottom: 0.5%;
        }
        .child:nth-child(6n) {
           margin-right: 0;
        }

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

Для 6 блоків потрібно врахувати 5 горизонтальних відступів.

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

.child { width: calc(100% / 6 - 0.5% * 5 / 6); margin-right: 0.5%; margin-bottom: 0.5%; } .child:nth-child(6n) { margin-right: 0; }

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

📌 Завдання:

Задайте блокам ширину у відсотках так, щоб у плитці було 4 блоки в ряд.
Відстань між блоками має становити 30px.


        .child {
           width: /* ваш код */;
           margin-right: 30px;
           margin-bottom: 30px;
        }
        .child:nth-child(4n) {
           margin-right: 0;
        }

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

Між 4 блоками буде 3 відступи по 30px. Відніміть їхню загальну ширину від 100% контейнера.

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


        .child {
           width: calc((100% - 30px * 3) / 4);
           margin-right: 30px; margin-bottom: 30px;
          }
        .child:nth-child(4n) {
            margin-right: 0;
          }

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

📌 Завдання:

Задайте блокам ширину у відсотках так, щоб у плитці було 5 блоків у ряд.
Відстань між блоками має становити 50px.


        .child { width: /* ваш код */; 
          margin-right: 50px;
          margin-bottom: 50px;
          }
         
      .child:nth-child(5n) {
         margin-right: 0;
          }

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

Для 5 блоків потрібно врахувати 4 горизонтальні відступи по 50px.

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


        .child {
           width: calc((100% - 50px * 4) / 5);
           margin-right: 50px; margin-bottom: 50px;
           }
        .child:nth-child(5n) {
           margin-right: 0; }