Відсотки та одиниці fr у CSS Grid

Вивчаємо використання відсотків (%) разом з одиницями fr для створення гнучких колонок CSS Grid.

Відсотки та одиниці fr у CSS Grid

У CSS Grid ширину колонок можна задавати не тільки через px та fr, але й за допомогою відсотків (%).

Відсотки визначають частину ширини Grid-контейнера. Після розрахунку колонок у %, простір, що залишився, розподіляється між колонками з одиницею fr.

<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>

#parent {
  display: grid;

  grid-template-columns: 50% 1fr 2fr 30%;

  border: 2px solid #696989;
  padding: 10px;
  width: 600px;
}

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

Спочатку Grid виділяє місце для колонок із процентними значеннями. Після цього весь залишковий простір ділиться між колонками з fr.

❗ Важливо:

Відсотки рахуються від ширини Grid-контейнера, а fr працює тільки із залишком вільного простору.

Приклади використання % разом із fr

#parent {
  display: grid;

  grid-template-columns: 20% 1fr 1fr;
}

#parent {
  display: grid;

  grid-template-columns: 100px 20% 1fr 2fr 4fr;
}

% задає частину ширини контейнера.
fr розподіляє залишок вільного місця.
px має фіксований розмір.
У Grid можна комбінувати px, %, fr в одному правилі.

📌 Завдання:

№1. Створіть Grid із трьома колонками.
№2. Зробіть першу колонку шириною 20%.
№3. Зробіть другу та третю колонки однаковими через fr.
№4. Створіть Grid із п'ятьма колонками.
№5. Задайте першій колонці 100px.
№6. Другу колонку зробіть шириною 20%.
№7. Інші колонки зробіть у два рази більшими за попередні.

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

Після фіксованих значень px та % використовуйте fr для створення потрібного співвідношення між колонками.

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

/* №1 */
grid-template-columns: 20% 1fr 1fr;

/* №2 */
grid-template-columns: 100px 20% 1fr 2fr 4fr;