Sifa grid-column

Sifa grid-column huweka nafasi ya kuanzia na ya kumalizia kwa kipengele kwenye gridi au wavu kwa safu wima. Thamani za sifa zinaweza kuwa nambari chanya au hasi, zikipewa kwa kutumia kufyeka. Nambari ya kwanza inaashiria nafasi ya kuanzia kwa kipengele, ya pili - nafasi ya kumalizia.

Ikiwa kama thamani tunaweka nambari chanya, basi nafasi ya kipengele inahesabiwa kutoka kushoto kuelekea kulia. Wakati wa kubainisha nambari hasi kipengele kitawekwa kwa mpangilio wa nyuma, yaani, kutoka kulia kwenda kushoto.

Kisarufi

kichaguli {
	grid-column: nafasi ya kuanzia / nafasi ya kumalizia;
}

Mfano

Wacha tuweke viambajengo kwenye gridi nafasi za kuanzia na za kumalizia:

<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: 1 / 2;
}
#elem2 {
	grid-column: 1 / 3;
}
#elem3 {
	grid-column: 1 / 4;
}

Mfano

Na sasa wacha kwenye sifa grid-column tubainishe 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: 1 / -2;
}
#elem2 {
	grid-column: 1 / -3;
}
#elem3 {
	grid-column: 1 / -4;
}

Mfano

Na sasa tufanye ili kipengele cha kwanza, cha pili na cha tatu kiweke kwenye 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: 1 / 2;
}
#elem2 {
	grid-column: 2 / 3;
}
#elem3 {
	grid-column: 3 / 4;
}
#elem4 {
	grid-column: 1 / 4;
}

Mfano

Wakati wa kuziba safu wima, zinazochukuliwa na viambajengo vilivyo karibu, kila kipengele kinachofuata kusongwa hadi safu ya chini. Wacha kwa kutumia hii sifa tufanye ili kipengele cha kwanza kiweke kwenye safu ya kwanza, cha pili - kwenye ya pili, na cha tatu na cha nne - kwenye 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: 1 / 4;
}
#elem2 {
	grid-column: 2 / 3;
}
#elem3 {
	grid-column: 1 / 2;
}
#elem4 {
	grid-column: 3 / 4;
}

Mfano

Tuchanganye sifa grid-column na grid-row:

<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;
	grid-template-columns: 2fr 1fr 1fr;
	border: 2px solid #696989;
	padding: 10px;
	height: 300px;
	width: 400px;
}
#parent > div {
	padding: 10px;
	border: 1px solid #696989;
}
#elem1 {
	grid-row: 1 / 3;
}
#elem2 {
	grid-row: 1 / 2;
}
#elem3 {
	grid-row: 1 / 2;
}
#elem4 {
	grid-row: 2 / 3;
	grid-column: 2 / 4;
}

Mfano

Na sasa wacha tufanye ili kizuizi cha kwanza na cha tano kichukue safu nzima, na kizuizi cha pili - safu mbili na safu wima mbili, na vizuizi vya tatu na vya nne - safu moja na safu wima mbili:

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

#parent {
	display: grid;
	grid-template-columns: 2fr 1fr 1fr;
	border: 2px solid #696989;
	padding: 10px;
	height: 300px;
	width: 400px;
}
#parent > div {
	padding: 10px;
	border: 1px solid #696989;
}
#elem1 {
	grid-row: 1 / 2;
	grid-column: 1 / 4;
}
#elem2 {
	grid-row: 2 / 4;
	grid-column: 1 / 2;
}
#elem3 {
	grid-row: 2 / 3;
	grid-column: 2 / 4;
}
#elem4 {
	grid-row: 3 / 3;
	grid-column: 2 / 4;
}
#elem5 {
	grid-row: 4 / 5;
	grid-column: 1 / 4;
}

Angalia pia

sifa grid-row,
ambayo huweka nafasi ya kuanzia na ya kumalizia kwa kipengele kwenye gridi kwa safu mlalo
sifa grid-column-start,
ambayo huweka nafasi ya kuanzia kwa kipengele kwenye gridi kwa safu wima
sifa grid-column-end,
ambayo huweka nafasi ya kumalizia kwa kipengele kwenye gridi kwa safu wima
sifa grid-template-columns,
ambayo huweka idadi na upana wa safu wima kwenye gridi
sifa grid-auto-columns,
ambayo huweka idadi na upana wa safu wima kwenye gridi isiyo wazi