Significado de auto-fit en CSS Grid

Ahora consideremos el valor auto-fit, que también se aplica al especificar columnas del mismo tamaño en conjunto con la función repeat. Su diferencia con el valor auto-fill radica en que auto-fit ajusta la cantidad de columnas a el ancho disponible del contenedor, expandiendo o comprimiéndolas.

Ejemplo

Consideremos el funcionamiento del valor auto-fit en el ejemplo de un contenedor con ocho elementos. Apliquemos junto con el valor auto-fit la función minmax que ya conoces por la lección anterior:

<div id="parent">
	<div>1</div>
	<div>2</div>
	<div>3</div>
	<div>4</div>
	<div>5</div>
	<div>6</div>
	<div>7</div>
	<div>8</div>
</div>

#parent {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	border: 2px solid #696989;
	padding: 10px;
	width: 600px;
}
#parent > div {
	padding: 10px;
	border: 1px solid #696989;
}

Ejemplo

Y ahora reduzcamos el ancho del contenedor grid a 400px:

<div id="parent">
	<div>1</div>
	<div>2</div>
	<div>3</div>
	<div>4</div>
	<div>5</div>
	<div>6</div>
	<div>7</div>
	<div>8</div>
</div>

#parent {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	border: 2px solid #696989;
	padding: 10px;
	width: 400px;
}
#parent > div {
	padding: 10px;
	border: 1px solid #696989;
}

Tareas prácticas

Supongamos que tienes una tabla de nueve elementos. Establece para ellos usando el valor auto-fit un ancho de columnas y un ancho de contenedor grid tal que todos los elementos hijos se coloquen en tres filas.

Y ahora modifica la tarea anterior de modo que todos los elementos se ubiquen en dos filas.