Fr vienetas

Lankstumo vienetas fr reiškia visos erdvės, kurioje yra elementas, dalią arba frakciją. fr naudojimo pranašumas yra jo prisitaikymas prie skirtingų konteinerių ar ekrano raiškos, kadangi fr tiesiog paskirsto visą erdvę į nurodytą frakcijų (dalių) skaičių nepririšant prie tikslaus jų dydžio pikseliais.

Pavyzdys

Naudodami savybę grid-template-columns padarykime, kad pirmasis ir antrasis tinklelio stulpeliai užimtų vieną konteinerio dalį, o trečiasis stulpelis - tris dalis:

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

Pavyzdys

Reikšmės, nurodytos fr vienetais, gali būti trupmeninės. Pakeiskime ankstesnį pavyzdį, nurodydami antrojo ir trečiojo stulpelio plotį trupmeniniais skaičiais:

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

Taip pat žiūrėkite

vienetas px,
kuris nustato dydį pikseliais
vienetas em,
kuris nustato dydį em
vienetas rem,
kuris nustato dydį rem
vienetas %,
kuris nustato dydį procentais
vienetas vw,
kuris nustato dydį vw
vienetas vh,
kuris nustato dydį vh
vienetas vmax,
kuris nustato dydį vmax
vienetas vmin,
kuris nustato dydį vmin