Fr eenheid

Die buigsaamheidseenheid fr verteenwoordig 'n aandeel of fraksie van die algehele grootte van die spasie waarin die element hom bevind. Die voordeel van die gebruik van fr is die aanpasbaarheid daarvan by verskillende houers of skermresolusies, aangesien fr eenvoudig die totale spasie verdeel volgens die gespesifiseerde aantal fraksies (dele) sonder om dit vas te koppel aan 'n presiese grootte in pixels.

Voorbeeld

Kom ons gebruik die eienskap grid-template-columns om die eerste en tweede kolomme van die rooster een deel van die houer te laat inneem, en die derde kolom drie 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;
}

Voorbeeld

Waardes gespesifiseer in fr eenhede kan breukvorm aanneem. Kom ons verander die vorige voorbeeld deur vir die tweede en derde kolom breedtes in breukgetalle te spesifiseer:

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

Sien ook

die px eenheid,
wat grootte in pixels spesifiseer
die em eenheid,
wat grootte in em spesifiseer
die rem eenheid,
wat grootte in rem spesifiseer
die % eenheid,
wat grootte in persentasie spesifiseer
die vw eenheid,
wat grootte in vw spesifiseer
die vh eenheid,
wat grootte in vh spesifiseer
die vmax eenheid,
wat grootte in vmax spesifiseer
die vmin eenheid,
wat grootte in vmin spesifiseer