Одиниця fr у CSS Grid

Вивчаємо гнучку одиницю fr у CSS Grid для розподілу доступного простору між колонками та рядками.

Одиниця fr у CSS Grid

У CSS Grid розміри колонок і рядків можна задавати не тільки у пікселях, а й за допомогою спеціальної одиниці fr (fraction).

Одиниця 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>9</div>
</div>

#parent {
  display: grid;

  grid-template-columns: 1fr 1fr 3fr;

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

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

У цьому прикладі весь доступний простір ділиться на 5 частин: 1 + 1 + 3 = 5. Перші дві колонки займають по одній частині, а третя — три частини.

❗ Важливо:

Чим більше значення fr у колонки, тим більше місця вона отримає відносно інших колонок.

Порівняння fr

1fr 1fr — дві однакові колонки.
1fr 1fr 1fr — три однакові колонки.
1fr 1fr 2fr — третя колонка вдвічі більша за перші дві.

#parent {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

#parent {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
}

#parent {
  display: grid;
  grid-template-columns: 1fr 1fr 2fr;
}

📌 Завдання:

№1. Створіть Grid із двома колонками.
№2. Зробіть однакову ширину колонок за допомогою fr.
№3. Створіть Grid із трьома колонками однакової ширини.
№4. Зробіть третю колонку вдвічі більшою за першу та другу.

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

Для рівного розподілу простору використовуйте однакові значення fr. Для більшої колонки збільшуйте її число.

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

/* 1. Дві однакові колонки */
grid-template-columns: 1fr 1fr;

/* 2. Три однакові колонки */
grid-template-columns: 1fr 1fr 1fr;

/* 3. Третя колонка вдвічі більша */
grid-template-columns: 1fr 1fr 2fr;