Eigenschap grid-column-end

De eigenschap grid-column-end bepaalt de eindpositie van een element in het grid of rooster tot een bepaalde kolom. De waarde van de eigenschap kan een positief of negatief getal zijn. Als we een positief getal opgeven, dan wordt de eindpositie 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.

Een belangrijk nuance van de eigenschap grid-column-end is dat het nummer van de opgegeven kolom niet is inbegrepen in de eindpositie van het element - als we het getal 3 opgeven, dan neemt het element alleen de eerste en tweede kolom in beslag.

Syntaxis

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

Voorbeeld

Laten we de eindposities instellen voor 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;
	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;
}

Voorbeeld

En laten we nu met behulp van de eigenschap grid-column-start ervoor zorgen dat het eerste, tweede en derde element op 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 die worden ingenomen door aangrenzende elementen, verschuift elk volgend element naar een rij lager. Laten we gebruikmaken van deze eigenschap om ervoor te zorgen dat het eerste element op de eerste rij komt, het tweede - op de tweede, en het derde en vierde - op de derde rij:

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

Voorbeeld

Laten we nu in de eigenschap grid-column-end 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;
	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;
}

Zie ook

eigenschap grid-column-start,
dat de startpositie van een element in het grid per kolom bepaalt
eigenschap grid-column,
dat de start- en eindposities van een element in het grid per kolom 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 een impliciet grid bepaalt