fr бирдиги

Ийкемдүүлүк бирдиги fr элемент жайгашкан мейкиндиктин жалпы өлчөмүнүн үлүшүн же бөлүгүн билдирет. fr колдонуунун артыкчылыгы анын ар кандай контейнерлерге же экрандын ажырымына ыңгайлануучулугунда, анткени 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>

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

Мисал

fr бирдигинде көрсөтүлгөн маанилер бөлчөк түрүндө боло алат. Мурунку мисалды өзгөртүп, экинчи жана үчүнчү тилкенин туурасын бөлчөк сандар менен көрсөтөлү:

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

Ошондой эле караңыз

px бирдиги,
өлчөмдү пикселде белгилейт
em бирдиги,
өлчөмдү em'де белгилейт
rem бирдиги,
өлчөмдү rem'де белгилейт
% бирдиги,
өлчөмдү пайыздар менен белгилейт
vw бирдиги,
өлчөмдү vw'де белгилейт
vh бирдиги,
өлчөмдү vh'де белгилейт
vmax бирдиги,
өлчөмдү vmax'те белгилейт
vmin бирдиги,
өлчөмдү vmin'де белгилейт