Griglia con larghezza automatica dei blocchi in CSS

Nella lezione precedente, nella nostra griglia risultava che la larghezza degli elementi e dei loro margini doveva sommare la larghezza del genitore. Questo è un po' poco universale. Facciamo in modo che gli elementi si adattino automaticamente alla larghezza del genitore.

Supponiamo di avere un genitore come questo:

.parent {
	display: flex;
	flex-wrap: wrap;
	width: 800px;
	margin: 50px auto;
	border: 1px solid red;
}

Supponiamo che gli elementi di questa griglia stiano in 4 blocchi per riga:

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

Impostiamo la larghezza dei nostri blocchi in modo che ciascuno di essi occupi un quarto del genitore. Per fare questo impostiamo la loro dimensione al 25%:

.child {
	box-sizing: border-box;
	width: 25%;
	height: 100px;
	border: 1px solid green;
}

Imposta la larghezza dei blocchi in percentuale in modo che nella griglia ci siano tre blocchi per riga.

Imposta la larghezza dei blocchi in percentuale in modo che nella griglia ci siano due blocchi per riga.

Imposta la larghezza dei blocchi in percentuale in modo che nella griglia ci sia un blocco per riga.