Griglia adattiva senza spazi in CSS

Creiamo una griglia che avrà un numero variabile di blocchi per riga a seconda della larghezza dello schermo. Ecco un esempio di cosa dovremmo ottenere:

Scriviamo prima il codice 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>

Ora aggiungiamo gli stili al genitore dei blocchi:

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

Ora impostiamo gli stili per i blocchi stessi, senza assegnare loro una larghezza:

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

È ovvio che la larghezza dei blocchi dovrebbe essere in percentuale, in modo che quando lo schermo cambia, i blocchi modifichino fluidamente la loro larghezza. Inoltre, a certi punti di interruzione dello schermo, dobbiamo cambiare la larghezza dei blocchi in modo che un certo numero di questi blocchi si adatti in una riga.

Scriviamo il codice che metterà quattro blocchi in una riga:

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

E ora mettiamo tre blocchi in una riga:

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

E ora mettiamo due blocchi in una riga:

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

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

Modifica il mio codice in modo che la larghezza dei blocchi venga calcolata tramite la funzione calc.

Crea una griglia che, quando lo schermo si riduce, abbia prima quattro elementi per riga, poi due elementi per riga, e infine un elemento per riga.

Crea una griglia che, quando lo schermo si riduce, abbia prima sei elementi per riga, poi tre elementi per riga, e infine un elemento per riga.