Пікселі та одиниці fr у CSS Grid

Вивчаємо комбінування фіксованих розмірів у px та гнучких значень fr для створення колонок CSS Grid.

Пікселі та одиниці fr у CSS Grid

У CSS Grid можна одночасно використовувати різні одиниці вимірювання. Наприклад, частину колонок можна задати у пікселях, а інші — за допомогою fr.

Пікселі задають фіксований розмір колонки, а 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: 100px 1fr 50px;

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

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

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

❗ Важливо:

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

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

#parent {
  display: grid;

  grid-template-columns: 100px 1fr 1fr;
}

#parent {
  display: grid;

  grid-template-columns: 100px 1fr 1.5fr 100px;
}

px використовується для фіксованих розмірів.
fr використовується для гнучкого розподілу простору.
Фіксовані px-колонки займають місце першими.
Залишок простору розподіляється між fr-колонками.

📌 Завдання:

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

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

Для нерівних колонок використовуйте співвідношення fr: наприклад 1fr 1.5fr означає, що друга колонка буде у півтора раза більшою.

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

/* №1 */
grid-template-columns: 100px 1fr 1fr;

/* №2 */
grid-template-columns: 100px 1fr 1.5fr 100px;