Marges verticales pour les tuiles en CSS

Ajoutons maintenant également des marges verticales. Pour ce faire, donnons à tous les éléments enfants une margin-bottom d'une valeur de 10px :

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

Comme nous pouvons le voir, tout fonctionne bien, à l'exception du fait que la dernière rangée est espacée du parent. Le plus souvent, ce n'est pas critique.

Créez une tuile avec deux éléments par rangée avec une distance entre les éléments de 20px.

Créez une tuile avec trois éléments par rangée avec une distance entre les éléments de 20px.

Créez une tuile avec quatre éléments par rangée avec une distance entre les éléments de 20px.