Kipimo fr

Kipimo cha kubadilika fr kinawakilisha sehemu au fraksheni ya jumla ya nafasi ambayo kipengele kiko ndani yake. Faida ya kutumia fr ni uwezo wake wa kukabiliana na vyombo au azimio la skrini tofauti, kwa sababu fr husambaza nafasi yote kwa idadi iliyoonyeshwa ya fraksheni (sehemu) bila kushikamana na ukubwa wao halisi katika saizi ya pikseli.

Mfano

Wacha tuzitumie sifa grid-template-columns kuifanya safu wima ya kwanza na ya pili ya gridi kuchukua sehemu moja ya chombo, na safu wima ya tatu - sehemu tatu:

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

Mfano

Thamani zilizoonyeshwa kwa vipimo fr zinaweza kuchukua mfumo wa sehemu. Wacha tubadilishe mfano uliopita, tukiwaonyesha safu wima ya pili na ya tinta upana katika nambari za sehemu:

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

Angalia Pia

kipimo px,
kinachoweka ukubwa kwa pikseli
kipimo em,
kinachoweka ukubwa kwa em
kipimo rem,
kinachoweka ukubwa kwa rem
kipimo %,
kinachoweka ukubwa kwa asilimia
kipimo vw,
kinachoweka ukubwa kwa vw
kipimo vh,
kinachoweka ukubwa kwa vh
kipimo vmax,
kinachoweka ukubwa kwa vmax
kipimo vmin,
kinachoweka ukubwa kwa vmin