CSS Gridlarida fr birligi

Griddagi qatorlar va ustunlar o‘lchamlari faqat px da emas, balki fr (fraction) moslashuvchanlik birliklarida ham belgilanishi mumkin. Ushbu birliklardan foydalanish, elementlarni joylashtirish uchun barcha bo'shliq teng ulushlar yoki fraksiyalarga bo'linishini anglatadi. Har bir element ushbu bo'linishning ma'lum bir qismini olishi mumkin. Keling, buni qanday amalga oshirishni ko'rib chiqaylik.

Keling, grid-template-columns xususiyati yordamida gridning birinchi va ikkinchi ustunlari konteynerning bir qismini, uchinchi ustun esa uch qismini egallashini ta'minlaylik:

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

Gridingizda ikkita ustun bo'lsin. Ular teng kenglikka ega bo'lishini ta'minlang.

Gridingizda uchta ustun bo'lsin. Ular teng kenglikka ega bo'lishini ta'minlang.

Gridingizda uchta ustun bo'lsin. Uchinchi ustun birinchi va ikkinchi ustundan ikki marta katta bo'lishini ta'minlang.