fr ერთეული CSS გრიდებში

გრიდის რიგების და სვეტების ზომები შეგიძლიათ დააყენოთ არა მხოლოდ px-ში, არამედ მოქნილობის ერთეულებში fr (ფრაქცია). ამ ერთეულების გამოყენება ნიშნავს, რომ ელემენტების განთავსებისთვის ყველა სივრცე დაიყოფა ტოლ წილებად ან ფრაქციებად. თითოეულ ელემენტს შეეძლება მიიღოს ამ დაყოფის გარკვეული ნაწილი. მოდით ვნახოთ, როგორ კეთდება ეს.

მოდით, grid-template-columns თვისების გამოყენებით გავაკეთოთ ისე, რომ გრიდის პირველმა და მეორე სვეტებმა დაიკავონ კონტეინერის ერთი ნაწილი, ხოლო მესამე სვეტმა - სამი ნაწილი:

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

css#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;
}

Результат: