fr birligi

Moslashuvchanlik birligi fr element joylashgan umumiy makonning ulushini yoki fraksiyasini bildiradi. fr dan foydalanishning afzalligi uning turli idishlar yoki ekran o‘lchamlariga moslashuvchanligidadir, chunki fr pikseldagi aniq o‘lchamlarga bog‘lanmasdan, butun bo‘shliqni ko‘rsatilgan fraksiyalar (qismlar) soniga teng taqsimlaydi.

Misol

Keling, grid-template-columns xususiyati yordamida gridning birinchi va ikkinchi ustunlari idishning 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>

#parent {
	display: grid;
	grid-template-columns: 1fr 1fr 3fr;
	border: 2px solid #696989;
	padding: 10px;
	width: 600px;
}
#parent > div {
	padding: 10px;
	border: 1px solid #696989;
	box-sizing: border-box;
	border: 1px solid #696989;
}

Misol

fr birliklarida ko‘rsatilgan qiymatlar kasr shaklida bo‘lishi mumkin. Keling, oldingi misolda ikkinchi va uchinchi ustunlarning kengligini kasr sonlarda ko‘rsatib o‘zgartiramiz:

<div id="parent">
	<div>1</div>
	<div>2</div>
	<div>3</div>
	<div>4</div>
	<div>5</div>
	<div>6</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;
}

Shuningdek qarang

px birligi,
o‘lchamni piksellarda belgilaydi
em birligi,
o‘lchamni em da belgilaydi
rem birligi,
o‘lchamni rem da belgilaydi
% birligi,
o‘lchamni foizlarda belgilaydi
vw birligi,
o‘lchamni vw da belgilaydi
vh birligi,
o‘lchamni vh da belgilaydi
vmax birligi,
o‘lchamni vmax da belgilaydi
vmin birligi,
o‘lchamni vmin da belgilaydi