Fr-ühik

Paindlikkuse ühik fr tähistab osa või murdosa kogu ruumi suurusest, kus element asub. fr kasutamise eeliseks on selle kohanduvus erinevatele konteineritele või ekraani eraldusvõimetele, kuna fr jaotab lihtsalt kogu ruumi määratud arvuks murdudeks (osadeks) ilma sidumata nende täpse suurusega pikslites.

Näide

Teeme omaduse grid-template-columns abil nii, et esimene ja teine võre veerg hõivaksid ühe osa konteinerist, ja kolmas veerg - kolm osa:

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

Näide

fr-ühikutes määratud väärtused võivad olla murdarvulised. Muudame eelmist näidet, määrates teise ja kolmanda veeru laiuse murdarvudena:

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

Vaata ka

ühik px,
mis määrab suuruse pikslites
ühik em,
mis määrab suuruse em-ides
ühik rem,
mis määrab suuruse rem-ides
ühik %,
mis määrab suuruse protsentides
ühik vw,
mis määrab suuruse vw-ides
ühik vh,
mis määrab suuruse vh-ides
ühik vmax,
mis määrab suuruse vmax-ides
ühik vmin,
mis määrab suuruse vmin-ides