Eienskap grid-column-start

Die eienskap grid-column-start spesifiseer die aanvanklike posisie van 'n element in 'n rooster volgens kolomme. Die waarde van die eienskap kan 'n positiewe of negatiewe getal wees. As ons 'n positiewe getal spesifiseer, word die aanvanklike posisie van die element van links na regs getel. Wanneer 'n negatiewe getal gespesifiseer word, sal die element in die omgekeerde volgorde geplaas word, d.w.s. van regs na links.

Sintaksis

selektor {
	grid-column-start: positiewe of negatiewe getal;
}

Voorbeeld

Kom ons spesifiseer vir die elemente in die rooster hul aanvanklike posisies:

<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;
}

Voorbeeld

En nou, laat ons in die eienskap grid-column-start negatiewe getalle spesifiseer:

<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;
}

Voorbeeld

En nou, met behulp van die eienskap grid-column-end maak ons so dat die eerste, tweede en derde elemente in die eerste ry geplaas word. En die vierde element die hele tweede ry beslaan:

<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;
}

Voorbeeld

Wanneer kolomme wat deur naburige elemente beslaan word, oorvleuel, skuif elke daaropvolgende element na 'n ry laer. Kom ons maak, met inagneming van hierdie moontlikheid, so dat die eerste element in die eerste ry geplaas word, die tweede - in die tweede, en die derde en vierde - die derde ry beslaan:

<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;
}

Sien ook

die eienskap grid-column-end,
wat die eindposisie van 'n element in die rooster volgens kolomme spesifiseer
die eienskap grid-column,
wat die aanvanklike en eindposisies van 'n element in die rooster volgens kolomme spesifiseer
die eienskap grid-template-columns,
wat die aantal en breedte van kolomme in die rooster spesifiseer
die eienskap grid-auto-columns,
wat die aantal en breedte van kolomme in die implisiete rooster spesifiseer