Asilimia na Vitengo fr kwenye Gridi za CSS

Pamoja na fr pia unaweza kutumia thamani kwa %, ambayo pia inaainisha sehemu gani ya chombo itakachoshikiliwa na safu wima. Wakati huo huo, kwanza utahesabiwa ukubwa wa safu wima kwa %, na nafasi iliyobaki itagawanywa katika sehemu (fraksi):

<div id="parent">
	<div>1</div>
	<div>2</div>
	<div>3</div>
	<div>4</div>
	<div>5</div>
	<div>6</div>
	<div>7</div>
	<div>8</div>
</div>

#parent {
	display: grid;
	grid-template-columns: 50% 1fr 2fr 30%;
	border: 2px solid #696989;
	padding: 10px;
	width: 600px;
}
#parent > div {
	padding: 10px;
	border: 1px solid #696989;
}

Letseni kwenye gridi yako kuna safu wima tatu. Fanyeni kiasi kwamba safu wima ya kwanza ishike 20%, na zile safu wima mbili zilizobaki ziwe za ukubwa sawa.

Letseni kwenye gridi yako kuna safu wima tano. Fanyeni kiasi kwamba safu wima ya kwanza ishike 100px, safu wima ya pili 20%, na safu wima zilizobaki zigawanye nafasi iliyobaki kiasi kwamba kila safu wima iwe mara mbili ya ukubwa wa ile iliyotangulia.