Griglia adattiva con spaziature in CSS

Ora creiamo una griglia con spaziature. Ecco un esempio di ciò che dovremmo ottenere:

Per iniziare, creiamo gli stili per il contenitore dei blocchi:

.parent {
	display: flex;
	flex-wrap: wrap;
	width: 95%;
	margin: 50px auto;
}

Ora impostiamo gli stili per i blocchi stessi, senza definirne la larghezza, ma impostando un margine inferiore in percentuale:

.child {
	box-sizing: border-box;
	height: 100px;
	padding: 20px;
	margin-bottom: 1.5%;
	border: 1px solid green;
}

Ora scriviamo il codice che disporrà quattro blocchi in una riga, impostando i relativi margini:

@media (min-width: 1000px) {
	.child {
		width: calc(100% / 4 - 1.5% * 3 / 4);
	}
	.child:not(:nth-child(4n)) {
		margin-right: 1.5%;
	}
}

E ora mettiamo tre blocchi in una riga:

@media (min-width: 700px) and (max-width: 1000px) {
	.child {
		width: calc(100% / 3 - 1.5% * 2 / 3);
	}
	.child:not(:nth-child(3n)) {
		margin-right: 1.5%;
	}
}

E ora mettiamo due blocchi in una riga:

@media (min-width: 400px) and (max-width: 700px) {
	.child {
		width: calc(100% / 2 - 1.5% * 1 / 2);
	}
	.child:not(:nth-child(2n)) {
		margin-right: 1.5%;
	}
}

Un blocco per riga:

@media (max-width: 400px) {
	.child {
		width: 100%;
	}
}

Mettiamo insieme tutto il codice:

.parent {
	display: flex;
	flex-wrap: wrap;
	width: 95%;
	margin: 50px auto;
}
.child {
	box-sizing: border-box;
	height: 100px;
	padding: 20px;
	margin-bottom: 1.5%;
	border: 1px solid green;
}

@media (max-width: 400px) {
	.child {
		width: 100%;
	}
}
@media (min-width: 400px) and (max-width: 700px) {
	.child {
		width: calc(100% / 2 - 1.5% * 1 / 2);
	}
	.child:not(:nth-child(2n)) {
		margin-right: 1.5%;
	}
}
@media (min-width: 700px) and (max-width: 1000px) {
	.child {
		width: calc(100% / 3 - 1.5% * 2 / 3);
	}
	.child:not(:nth-child(3n)) {
		margin-right: 1.5%;
	}
}
@media (min-width: 1000px) {
	.child {
		width: calc(100% / 4 - 1.5% * 3 / 4);
	}
	.child:not(:nth-child(4n)) {
		margin-right: 1.5%;
	}
}

Create una griglia che, quando lo schermo si riduce, abbia prima otto elementi per riga, poi quattro elementi per riga, poi due elementi per riga. Lasciate che lo spazio tra gli elementi sia 0.75%.

Modificate il problema precedente in modo che lo spazio tra gli elementi sia un valore fisso di 20px.