Grade adaptativa sem espaços em CSS

Vamos criar uma grade que terá uma quantidade variável de blocos por linha dependendo da largura da tela. Aqui está um exemplo do que deve ser o resultado:

Vamos escrever primeiro o código HTML:

<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 class="child">10</div>
	<div class="child">11</div>
	<div class="child">12</div>
</div>

Agora vamos adicionar os estilos ao elemento pai dos blocos:

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

Agora vamos definir os estilos para os próprios blocos, sem definir a sua largura:

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

Obviamente, a largura dos blocos deve ser em porcentagem, para que ao alterar o tamanho da tela os blocos alterem suavemente a sua largura. Ao mesmo tempo, em determinados pontos de quebra (breakpoints) da tela, devemos alterar a largura dos blocos para que uma quantidade específica desses blocos caiba em uma linha.

Vamos escrever o código que colocará quatro blocos em uma linha:

@media (min-width: 1000px) {
	.child {
		width: 25%;
	}
}

E agora vamos colocar três blocos em uma linha:

@media (min-width: 700px) and (max-width: 1000px) {
	.child {
		width: 33.3333%;
	}
}

E agora vamos colocar dois blocos em uma linha:

@media (min-width: 400px) and (max-width: 700px) {
	.child {
		width: 50%;
	}
}

Um bloco por linha:

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

Vamos juntar todo o código:

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

@media (max-width: 400px) {
	.child {
		width: 100%;
	}
}
@media (min-width: 400px) and (max-width: 700px) {
	.child {
		width: 50%;
	}
}
@media (min-width: 700px) and (max-width: 1000px) {
	.child {
		width: 33.3333%;
	}
}
@media (min-width: 1000px) {
	.child {
		width: 25%;
	}
}

Modifique o meu código para que a largura dos blocos seja calculada usando a função calc.

Crie uma grade que, ao reduzir o tamanho da tela, tenha primeiro quatro elementos por linha, depois dois elementos por linha e, em seguida, um elemento por linha.

Crie uma grade que, ao reduzir o tamanho da tela, tenha primeiro seis elementos por linha, depois três elementos por linha e, em seguida, um elemento por linha.