Sifa grid-column-start

Sifa grid-column-start huweka mwanzo wa msimamo wa kipengele katika gridi kwa safu wima. Thamani ya sifa inaweza kuwa nambari chanya au hasi. Ukiweka nambari chanya, basu msimamo wa mwanzo wa kipengele huhesabiwa kutoka kushoto kuelekea kulia. Ukiweka nambari hasi kipengele kitawekwa kwa mpangilio wa nyuma, yaani, kutoka kulia kuelekea kushoto.

Kiambato

kichaguli {
	grid-column-start: nambari chanya au hasi;
}

Mfano

Wacha tuweke viwango vya mwanzo vya vipengele katika gridi:

<div id="parent">
	<div id="elem1">1</div>
	<div id="elem2">2</div>
	<div id="elem3">3</div>
</div>

#parent {
	display: grid;
	padding: 10px;
	border: 2px solid #696989;
}
#parent > div {
	padding: 10px;
	border: 1px solid #696989;
}
#elem1 {
	grid-column-start: 1;
}
#elem2 {
	grid-column-start: 2;
}
#elem3 {
	grid-column-start: 3;
}

Mfano

Sasa wacha katika sifa grid-column-start tuweke nambari hasi:

<div id="parent">
	<div id="elem1">1</div>
	<div id="elem2">2</div>
	<div id="elem3">3</div>
</div>

#parent {
	display: grid;
	padding: 10px;
	border: 2px solid #696989;
}
#parent > div {
	padding: 10px;
	border: 1px solid #696989;
}
#elem1 {
	grid-column-start: -1;
}
#elem2 {
	grid-column-start: -2;
}
#elem3 {
	grid-column-start: -3;
}

Mfano

Sasa kwa kutumia sifa grid-column-end tufanye ili kipengele cha kwanza, cha pili na cha tatu kiwe katika safu ya kwanza. Na kipengele cha nne kichukue safu yote ya pili:

<div id="parent">
	<div id="elem1">1</div>
	<div id="elem2">2</div>
	<div id="elem3">3</div>
	<div id="elem4">4</div>
</div>

#parent {
	display: grid;
	padding: 10px;
	border: 2px solid #696989;
}
#parent > div {
	padding: 10px;
	border: 1px solid #696989;
}
#elem1 {
	grid-column-start: 1;
	grid-column-end: 2;
}
#elem2 {
	grid-column-start: 2;
	grid-column-end: 3;
}
#elem3 {
	grid-column-start: 3;
	grid-column-end: 4;
}
#elem4 {
	grid-column-start: 1;
	grid-column-end: 4;
}

Mfano

Wakati safu wima zinazochukuliwa na vipengele vilivyo karibu zinajigawa, kila kipengele kinachofuata kusongezwa kwenye safu iliyo chini. Wacha tukizingatia uwezo huu tufanye ili kipengele cha kwanza kiweke kwenye safu ya kwanza, cha pili - kwenye ya pili, na cha tatu na cha nne - vichukue safu ya tatu:

<div id="parent">
	<div id="elem1">1</div>
	<div id="elem2">2</div>
	<div id="elem3">3</div>
	<div id="elem4">4</div>
</div>

#parent {
	display: grid;
	padding: 10px;
	border: 2px solid #696989;
}
#parent > div {
	padding: 10px;
	border: 1px solid #696989;
}
#elem1 {
	grid-column-start: 1;
	grid-column-end: 4;
}
#elem2 {
	grid-column-start: 2;
	grid-column-end: 3;
}
#elem3 {
	grid-column-start: 1;
	grid-column-end: 2;
}
#elem4 {
	grid-column-start: 3;
	grid-column-end: 4;
}

Angalia Pia

sifa grid-column-end,
ambayo huweka mwisho wa msimamo wa kipengele katika gridi kwa safu wima
sifa grid-column,
ambayo huweka mwanzo na mwisho wa msimamo wa kipengele katika gridi kwa safu wima
sifa grid-template-columns,
ambayo huweka idadi na upana wa safu wima katika gridi
sifa grid-auto-columns,
ambayo huweka idadi na upana wa safu wima katika gridi isiyo wazi