Placă adaptivă cu spații în CSS

Să creăm acum o placă cu spații. Iată un exemplu al ceea ce ar trebui să obținem:

Pentru început, să creăm stilurile pentru părintele blocurilor:

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

Acum să setăm stilurile blocurilor în sine, fără a le seta lățimea, dar setând margin-bottom în procente:

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

Acum să scriem codul care va așeza patru blocuri pe rând, setând marginile corespunzătoare:

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

Și acum să așezăm trei blocuri pe rând:

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

Și acum să așezăm două blocuri pe rând:

@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 bloc pe rând:

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

Să adunăm tot codul împreună:

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

Creați o placă care, atunci când ecranul se micșorează, să aibă mai întâi opt elemente pe rând, apoi patru elemente pe rând, apoi două elemente pe rând. Lăsați spațiul dintre elemente să fie 0.75%.

Modificați problema anterioară astfel încât spațiul dintre elemente să fie o valoare fixă de 20px.