Kipimo fr katika Gridi za CSS

Vipimo vya safu na safu wima katika gridi vinaweza kuwekwa sio tu kwa px, bali pia kwa kutumia vipimo vya kubadilika fr (sehemu). Matumizi ya vipimo hivi inamaanisha, kuwa nafasi yote ya kuweka vipengele itagawanywa katika sehemu sawa au sehemu ndogo. Kila kipengele kitaweza kuchukua sehemu fulani ya huu mgawanyiko. Hebu tuangalie, jinsi hii inafanyika.

Hebu kwa kutumia sifa grid-template-columns tufanye ili safu wima ya kwanza na ya pili ya gridi zichukue 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>7</div>
	<div>8</div>
	<div>9</div>
</div>

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

Acha gridi yako iwe na safu wima mbili. Fanya ili ziwe na upana sawa.

Acha gridi yako iwe na safu wima tatu. Fanya ili ziwe na upana sawa.

Acha gridi yako iwe na safu wima tatu. Fanya ili safu wima ya tatu iwe mara dufu kubwa kuliko ya kwanza na ya pili.