Unitatea fr

Unitatea de flexibilitate fr reprezintă o parte sau fracțiune din dimensiunea totală a spațiului în care se află elementul. Avantajul utilizării fr este adaptabilitatea sa la diferite containere sau rezoluții de ecran, deoarece fr distribuie simplu întregul spațiu în numărul indicat de fracțiuni (părți) fără a fi legat de dimensiunea lor exactă în pixeli.

Exemplu

Să folosim proprietatea grid-template-columns pentru a face ca prima și a doua coloană a grid-ului să ocupe o parte a containerului, iar a treia coloană - trei părți:

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

Exemplu

Valorile specificate în unități fr pot lua forme fracționale. Să modificăm exemplul anterior, specificând pentru a doua și a treia coloană lățimea în numere fracționale:

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

Vezi și

unitatea px,
care stabilește dimensiunea în pixeli
unitatea em,
care stabilește dimensiunea în em
unitatea rem,
care stabilește dimensiunea în rem
unitatea %,
care stabilește dimensiunea în procente
unitatea vw,
care stabilește dimensiunea în vw
unitatea vh,
care stabilește dimensiunea în vh
unitatea vmax,
care stabilește dimensiunea în vmax
unitatea vmin,
care stabilește dimensiunea în vmin