Mosaico con ancho automático de bloques en CSS

En la lección anterior, en nuestro mosaico resultaba que el ancho de los elementos y sus márgenes en suma debían dar el ancho del padre. Esto es un poco poco universal. Hagamos que los elementos se ajusten automáticamente al ancho del padre.

Supongamos que tenemos un padre como este:

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

Supongamos que los elementos de este mosaico están a 4 bloques por fila:

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

Establezcamos el ancho de nuestros bloques para que cada uno de ellos ocupe un cuarto del padre. Para ello establecemos su tamaño en 25%:

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

Establezca el ancho de los bloques en porcentaje para que en el mosaico haya tres bloques por fila.

Establezca el ancho de los bloques en porcentaje para que en el mosaico haya dos bloques por fila.

Establezca el ancho de los bloques en porcentaje para que en el mosaico haya un bloque por fila.