Margens verticais para blocos em CSS

Agora vamos adicionar também margens verticais. Para isso, vamos definir margin-bottom como 10px para todos os elementos filhos:

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

Como podemos ver, tudo funciona bem, exceto pelo fato de que a última linha tem uma margem do elemento pai. Na maioria das vezes, isso não é crítico.

Crie blocos com dois elementos por linha com espaçamento entre os elementos de 20px.

Crie blocos com três elementos por linha com espaçamento entre os elementos de 20px.

Crie blocos com quatro elementos por linha com espaçamento entre os elementos de 20px.