Zusammenführen von Spalten in CSS Grids

In ähnlicher Weise können Spalten mit der Eigenschaft grid-column zusammengeführt werden.

Nehmen wir an, wir haben ein Grid mit vier Elementen. Lassen Sie uns nun das erste, zweite und dritte Element in der ersten Reihe platzieren. Das vierte Element soll die gesamte zweite Reihe einnehmen:

<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;
	width: 400px;
	height: 300px;
}
#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;
}

Platzieren Sie alle Elemente und führen Sie die Spalten gemäß dem folgenden Beispiel zusammen: