Дробові одиниці fr у CSS Grid

Дробові одиниці fr у CSS Grid

Одиниця fr у CSS Grid може використовуватися не тільки з цілими числами, але й з дробовими значеннями.

Дробові значення дозволяють більш точно керувати співвідношенням ширини колонок.

<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 0.5fr 2.5fr;

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

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

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

Приклади співвідношень колонок

#parent {
  display: grid;

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

#parent {
  display: grid;

  grid-template-columns: 1fr 1.5fr 2.5fr;
}

• 1fr 1fr 1.5fr — третя колонка у 1.5 раза більша.
• 1fr 1.5fr 2.5fr — друга колонка у 1.5 раза більша, третя у 2.5 раза.
• Дробові fr дозволяють створювати гнучкі пропорції колонок.

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

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