Eigenschap grid-column-start

De eigenschap grid-column-start bepaalt de startpositie van een element in het grid volgens de kolommen. De waarde van de eigenschap kan een positief of negatief getal zijn. Als we een positief getal opgeven, dan wordt de startpositie van het element van links naar rechts geteld. Bij het opgeven van een negatief getal wordt het element in omgekeerde volgorde geplaatst, d.w.z. van rechts naar links.

Syntaxis

selector {
	grid-column-start: positief of negatief getal;
}

Voorbeeld

Laten we de startposities instellen voor de elementen in het grid:

<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

Laten we nu in de eigenschap grid-column-start negatieve getallen opgeven:

<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

Laten we nu met behulp van de eigenschap grid-column-end ervoor zorgen dat het eerste, tweede en derde element in de eerste rij worden geplaatst. En het vierde element de hele tweede rij inneemt:

<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

Bij het overlappen van kolommen, ingenomen door aangrenzende elementen, schuift elk volgend element een rij naar beneden op. Laten we, rekening houdend met deze mogelijkheid, ervoor zorgen dat het eerste element in de eerste rij wordt geplaatst, het tweede - in de tweede, en het derde en vierde - de derde rij innemen:

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

Zie ook

eigenschap grid-column-end,
dat de eindpositie van een element in het grid volgens de kolommen bepaalt
eigenschap grid-column,
dat de start- en eindposities van een element in het grid volgens de kolommen bepaalt
eigenschap grid-template-columns,
dat het aantal en de breedte van kolommen in het grid bepaalt
eigenschap grid-auto-columns,
dat het aantal en de breedte van kolommen in het impliciete grid bepaalt