Sifa ya grid-column-end

Sifa grid-column-end inaweka msimamo wa mwisho wa kipengele ndani ya gridi au wavu hadi safu wima fulani. Thamani ya sifa inaweza kuwa nambari chanya au hasi. Ikiwa tunaweka nambari chanya, basi msimamo wa mwisho wa kipengele huhesabiwa kutoka kushoto kuelekea kulia. Unapoainisha nambari hasi, kipengele kitapangwa kwa mpangilio wa nyuma, yaani, kutoka kulia kwenda kushoto.

Nuances muhimu ya sifa grid-column-end ni kwamba nambari ya safu wima iliyoainishwa haijumuishwa kwenye msimamo wa mwisho wa kipengele - ikiwa tutaweka nambari 3, basis kipengele kitachukua safu wima ya kwanza na ya pili pekee.

Kisarufi

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

Mfano

Wacha tuweke viwango vya mwisho kwa vipengele ndani ya gridi:

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

#parent {
	display: grid;
	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: 1;
	grid-column-end: 3;
}
#elem3 {
	grid-column-start: 1;
	grid-column-end: 4;
}

Mfano

Sasa kwa kutumia sifa grid-column-start tufanye ili kipengele cha kwanza, cha pili na cha tatu kipangwe kwenye safu mlalo ya kwanza. Na kipengele cha nne kichukue safu mlalo 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 jirani zinapishana, kipengele kilicho nacho kimeinuliwa kwenye safu mlalo iliyo chini. Wacha kwa kutumia sifa hii tufanye ili kipengele cha kwanza kipangwe kwenye safu mlalo ya kwanza, cha pili - kwenye ya pili, na cha tatu na cha nne - kwenye safu mlalo 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;
}

Mfano

Sasa wacha kwenye sifa grid-column-end tuainishe nambari hasi:

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

#parent {
	display: grid;
	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: 1;
	grid-column-end: -3;
}
#elem3 {
	grid-column-start: 1;
	grid-column-end: -2;
}

Angalia pia

sifa grid-column-start,
ambayo inaweka msimamo wa mwanzo wa kipengele kwenye gridi kulingana na safu wima
sifa grid-column,
ambayo inaweka msimamo wa mwanzo na wa mwisho wa kipengele kwenye gridi kulingana na safu wima
sifa grid-template-columns,
ambayo inaweka idadi na upana wa safu wima kwenye gridi
sifa grid-auto-columns,
ambayo inaweka idadi na upana wa safu wima kwenye gridi isiyo wazi