Idadi na Upana wa Safu Wima kwenye Gridi za CSS

Utangulizi wa kufanya kazi kwenye gridi tutaanza kwa kuaisha idadi na upana wa safu wima, ambazo elementsi watoto zitawekwa. Kwa lengo hili tutatumia sifa grid-template-columns, ambayo huelekezwa kwenye kipengele-kizazi mkuu na huweka idadi na upana wa safu wima, ambazo elementsi watoto watachukua kwenye gridi. Katika thamani ya sifa tunaainisha upana wa safu wima kwenye pikseli.

Mfano

Wacha kwanza tuunde kipengele kizazi mkuu na tukifanye kiwe chombo cha gridi. Tuchukulie tuna div, ambamo kuna elementsi nne watoto. Tuaidishe kwake katika sifa display thamani grid, na katika sifa grid-template-columns tuandike upana wa safu wima mbili:

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

#parent {
	display: grid;
	grid-template-columns: 200px 400px;
	border: 2px solid #696989;
	padding: 10px;
	width: 600px;
}
#parent > div {
	padding: 10px;
	border: 1px solid #696989;
}

Mfano

Sasa tujaunde jedwali lenye safu wima nne tofauti kwa ukubwa :

<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: 50px 100px 200px 250px;
	border: 2px solid #696989;
	padding: 10px;
	width: 600px;
}
#parent > div {
	padding: 10px;
	border: 1px solid #696989;
}

Kazi za Vitendo

Tuchukulie una div yenye elementsi tisa watoto . Fanya kipengele kizazi mkuu kiwe chombo cha gridi.

Weka elementsi watoto kwenye safu wima mbili za upana 200px.

Weka elementsi watoto kwenye safu wima tatu za upana 150px.

Weka elementsi watoto kwenye safu wima tatu : ya kwanza ya upana 100px, ya pili 150px, na ya tatu 200px.