Vertikale Abstände für Kacheln in CSS

Fügen wir nun auch vertikale Abstände hinzu. Dazu weisen wir allen Kindelementen margin-bottom mit dem Wert 10px zu:

<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;
	margin-bottom: 10px;
	border: 1px solid green;
}
.child:nth-child(3n) {
	margin-right: 0;
}

Wie wir sehen, funktioniert alles gut, abgesehen davon, dass die letzte Reihe vom Elternelement absteht. Meistens ist das nicht kritisch.

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

Erstellen Sie eine Kachelstruktur mit drei Elementen pro Reihe und einem Abstand zwischen den Elementen von 20px.

Erstellen Sie eine Kachelstruktur mit vier Elementen pro Reihe und einem Abstand zwischen den Elementen von 20px.