Fr-enheden

Fleksibilitetsenheden fr står for en andel eller fraktion af den samlede størrelse af det rum, hvor elementet er placeret. Fordelen ved at bruge fr er dens tilpasningsevne til forskellige containere eller skærmopløsninger, da fr blot fordeler al pladsen på det angivne antal af fraktioner (dele) uden at binde sig til deres nøjagtige størrelse i pixels.

Eksempel

Lad os ved hjælp af egenskaben grid-template-columns gøre så den første og anden kolonne i griddet indtager en del af containeren, og den tredje kolonne indtager tre dele:

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

Eksempel

Værdier angivet i fr-enheder kan tage brøkform. Lad os ændre det foregående eksempel ved at angive bredden for den anden og tredje kolonne som brøktal:

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

Se også

enheden px,
som angiver størrelse i pixels
enheden em,
som angiver størrelse i em
enheden rem,
som angiver størrelse i rem
enheden %,
som angiver størrelse i procent
enheden vw,
som angiver størrelse i vw
enheden vh,
som angiver størrelse i vh
enheden vmax,
som angiver størrelse i vmax
enheden vmin,
som angiver størrelse i vmin