Significado de auto-fit em CSS Grid

Agora vamos considerar o valor auto-fit, que também é aplicado ao especificar colunas do mesmo tamanho em conjunto com a função repeat. Sua diferença em relação ao valor auto-fill está no fato de que auto-fit ajusta a quantidade de colunas à largura disponível do contêiner, expandindo ou comprimindo elas.

Exemplo

Vamos examinar o funcionamento do valor auto-fit no exemplo de um contêiner com oito elementos. Vamos aplicar, junto com o valor auto-fit, a função minmax que você já conhece da lição 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;
}

Exemplo

E agora vamos reduzir a largura do contêiner de grid para 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;
}

Tarefas Práticas

Suponha que você tenha uma grade com nove elementos. Defina para eles, usando o valor auto-fit, a largura das colunas e a largura do contêiner de grid de forma que todos os elementos filhos sejam dispostos em três linhas.

E agora modifique a tarefa anterior para que todos os elementos sejam dispostos em duas linhas.