Raster mit korrekten Abständen in CSS

Lassen Sie uns ein funktionierendes Raster mit Abständen mittels margin erstellen, das problemlos funktioniert. Nehmen wir an, wir haben zunächst ein solches Raster ohne Abstände:

<div class="parent">
	<div class="child">1</div>
	<div class="child">2</div>
	<div class="child">3</div>
	<div class="child">4</div>
	<div class="child">5</div>
	<div class="child">6</div>
	<div class="child">7</div>
	<div class="child">8</div>
	<div class="child">9</div>
</div>

.parent {
	display: flex;
	flex-wrap: wrap;
	width: 300px;
	border: 1px solid red;
}
.child {
	box-sizing: border-box;
	width: 100px;
	height: 100px;
	border: 1px solid green;
}

Lassen Sie uns horizontale Abstände zwischen den Elementen mit margin hinzufügen.

Setzen wir dazu für alle Kindelemente margin-right auf den Wert 10px, und setzen diesen margin für jedes dritte Kindelement auf Null. Verwenden wir dafür die Pseudoklasse nth-child, und geben einen Parameter so an, dass jedes dritte Element ausgewählt wird.

Erhöhen wir auch die Breite des Elternelements auf 320px, um Platz für die Abstände zu schaffen, und schauen wir uns an, was wir erhalten:

<div class="parent">
	<div class="child">1</div>
	<div class="child">2</div>
	<div class="child">3</div>
	<div class="child">4</div>
	<div class="child">5</div>
	<div class="child">6</div>
	<div class="child">7</div>
	<div class="child">8</div>
	<div class="child">9</div>
</div>

.parent {
	display: flex;
	flex-wrap: wrap;
	width: 320px;
	border: 1px solid red;
}
.child {
	box-sizing: border-box;
	width: 100px;
	height: 100px;
	margin-right: 10px;
	border: 1px solid green;
}
.child:nth-child(3n) {
	margin-right: 0;
}

Also, alles funktioniert. Lassen Sie uns das letzte Element entfernen, damit in der letzten Zeile weniger Elemente sind, und uns vergewissern, dass wir dabei keine Probleme mit dieser letzten Zeile bekommen:

<div class="parent">
	<div class="child">1</div>
	<div class="child">2</div>
	<div class="child">3</div>
	<div class="child">4</div>
	<div class="child">5</div>
	<div class="child">6</div>
	<div class="child">7</div>
	<div class="child">8</div>
</div>

.parent {
	display: flex;
	flex-wrap: wrap;
	width: 320px;
	border: 1px solid red;
}
.child {
	box-sizing: border-box;
	width: 100px;
	height: 100px;
	margin-right: 10px;
	border: 1px solid green;
}
.child:nth-child(3n) {
	margin-right: 0;
}

Erstellen Sie ein Raster mit zwei Elementen pro Reihe und einem Abstand zwischen den Elementen von 20px.