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

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

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

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

დავუშვათ, თქვენს გრიდში ორი სვეტია. გახადეთ ისე, რომ მათ ჰქონდეთ თანაბარი სიგანე.

დავუშვათ, თქვენს გრიდში სამი სვეტია. გახადეთ ისე, რომ მათ ჰქონდეთ თანაბარი სიგანე.

დავუშვათ, თქვენს გრიდში სამი სვეტია. გახადეთ ისე, რომ მესამე სვეტი იყოს ორჯერ უფრო ფართო ვიდრე პირველი და მეორე.