Idadi na Upana wa Safu za Gridi za CSS

Vipengele vya gridi vinaweza pia kuwekwa kwa safu. Kwa hili imeundwa sifa grid-template-rows. Sifa hii inakubali ukubwa wa safu kupitia nafasi. Inaweza kutumika maadili sawa tuliyosoma kwa safu wima.

Mfano

Kwa mfano tuweke vizuizi katika safu nne:

<div id="parent">
	<div>1</div>
	<div>2</div>
	<div>3</div>
	<div>4</div>
</div>

#parent {
	display: grid;
	grid-template-rows: 50px 100px 50px 50px;
	border: 2px solid #696989;
	padding: 10px;
	width: 600px;
}
#parent > div {
	padding: 10px;
	border: 1px solid #696989;
}

Mfano

Tuweke kwa safu ya kwanza na ya tatu upana maalum kwenye saizi ya pikseli, na safu ya pili iache ichukue nafasi iliyobaki:

<div id="parent">
	<div>1</div>
	<div>2</div>
	<div>3</div>
</div>

#parent {
	display: grid;
	grid-template-rows: 100px auto 60px;
	border: 2px solid #696989;
	padding: 10px;
	width: 600px;
	height: 400px;
}
#parent > div {
	padding: 10px;
	border: 1px solid #696989;
}

Mfano

Tumye kitendo repeat kwa kuashiria ukubwa wa safu:

<div id="parent">
	<div>1</div>
	<div>2</div>
	<div>3</div>
</div>

#parent {
	display: grid;
	grid-template-rows: repeat(3, 1fr);
	border: 2px solid #696989;
	padding: 10px;
	width: 600px;
	height: 200px;
}
#parent > div {
	padding: 10px;
	border: 1px solid #696989;
}

Mfano

Tuweke kwa safu urefu wa 50px, na idadi ya safu iwe otomatiki kwa kutumia thamani auto-fill:

<div id="parent">
	<div>1</div>
	<div>2</div>
	<div>3</div>
	<div>4</div>
</div>

#parent {
	display: grid;
	grid-template-rows: repeat(auto-fill, 50px);
	border: 2px solid #696989;
	padding: 10px;
	width: 400px;
	height: 200px;
}
#parent > div {
	padding: 10px;
	border: 1px solid #696989;
}

Kazi za Vitendo

Weka vizuizi katika safu tatu. Kizuizi cha kwanza kiwe na ukubwa wa 100px, cha pili 150px, na cha tatu 200px.

Gridi yako iwe na safu tatu. Fanya ziwae ukubwa sawa.