Unità fr

L'unità flessibile fr rappresenta una frazione o parte della dimensione totale dello spazio disponibile in cui si trova l'elemento. Il vantaggio dell'uso di fr è la sua adattabilità a contenitori o risoluzioni dello schermo diversi, poiché fr distribuisce semplicemente lo spazio totale nel numero specificato di frazioni (parti) senza legarsi alla loro dimensione esatta in pixel.

Esempio

Utilizziamo la proprietà grid-template-columns per fare in modo che la prima e la seconda colonna della griglia occupino una parte del contenitore, e la terza colonna - tre parti:

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

Esempio

I valori specificati in unità fr possono essere frazionari. Modifichiamo l'esempio precedente, specificando per la seconda e la terza colonna una larghezza in numeri frazionari:

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

Vedi anche

unità px,
che imposta la dimensione in pixel
unità em,
che imposta la dimensione in em
unità rem,
che imposta la dimensione in rem
unità %,
che imposta la dimensione in percentuale
unità vw,
che imposta la dimensione in vw
unità vh,
che imposta la dimensione in vh
unità vmax,
che imposta la dimensione in vmax
unità vmin,
che imposta la dimensione in vmin