La valeur auto dans les grilles CSS

Dans les grilles, lors de la définition des dimensions des rangées et des colonnes, vous pouvez utiliser la valeur auto. Dans ce cas, les blocs rempliront simplement tout l'espace libre qui leur est disponible moins la largeur spécifiée en pixels. Regardons cela avec des exemples.

Spécifions une largeur fixe en pixels pour les première et troisième colonnes, et laissons la deuxième colonne occuper automatiquement l'espace restant :

<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: 100px auto 150px;
	border: 2px solid #696989;
	padding: 10px;
	width: 600px;
}
#parent > div {
	padding: 10px;
	border: 1px solid #696989;
}

Placez les éléments enfants dans deux colonnes : la première d'une largeur de 200px, et laissez la seconde occuper l'espace restant.

Placez les éléments enfants dans trois colonnes : la première d'une largeur de 100px, la seconde de 150px, et laissez la troisième occuper l'espace restant.