De fr-eenheid

De flexibele eenheid fr vertegenwoordigt een deel of fractie van de totale grootte van de ruimte waarin het element zich bevindt. Het voordeel van het gebruik van fr is de aanpassingsvermogen aan verschillende containers of schermresoluties, omdat fr eenvoudig de totale ruimte verdeelt in het opgegeven aantal fracties (delen) zonder binding aan hun exacte grootte in pixels.

Voorbeeld

Laten we met behulp van de eigenschap grid-template-columns instellen dat de eerste en tweede kolom van het grid één deel van de container innemen, en de derde kolom - drie delen:

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

Voorbeeld

Waarden, opgegeven in fr-eenheden, kunnen fractionele waarden aannemen. Laten we het vorige voorbeeld aanpassen door voor de tweede en derde kolom een breedte in breuken in te stellen:

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

Zie ook

eenheid px,
die de grootte in pixels instelt
eenheid em,
die de grootte in em instelt
eenheid rem,
die de grootte in rem instelt
eenheid %,
die de grootte in procenten instelt
eenheid vw,
die de grootte in vw instelt
eenheid vh,
die de grootte in vh instelt
eenheid vmax,
die de grootte in vmax instelt
eenheid vmin,
die de grootte in vmin instelt