Griglia con margini corretti in CSS

Creiamo una griglia funzionante senza problemi con margini realizzati tramite margin. Supponiamo di avere inizialmente una griglia senza margini:

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

Creiamo i margini orizzontali tra gli elementi utilizzando margin.

Impostiamo a questo scopo per tutti gli elementi figli margin-right al valore 10px, e per ogni terzo figlio azzeriamo questo margin. Usiamo per questo lo pseudo-classe nth-child, impostando il parametro in modo da selezionare ogni terzo elemento.

Aumentiamo anche la larghezza del genitore a 320px, per fare spazio ai margini, e osserviamo cosa otteniamo:

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

Quindi, tutto funziona. Rimuoviamo l'ultimo elemento, in modo che nell'ultima riga ci siano meno elementi e verifichiamo che non ci siano problemi con questa ultima riga:

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

Create una griglia con due elementi per riga e con una distanza tra gli elementi di 20px.