Propriété grid-auto-columns

La propriété grid-auto-columns définit le nombre et la largeur des colonnes que un élément occupera dans la grille implicite. Grille implicite - une grille qui est créée automatiquement lorsque les éléments dépassent le cadre de la grille déjà définie. Dans la valeur de la propriété, nous spécifions la largeur des colonnes dans toutes les unités de taille. La propriété est spécifiée dans l'élément parent et définit la largeur des colonnes des éléments enfants.

Syntaxe

sélecteur {
	grid-auto-columns: largeur de colonne;
}

Exemple

Définissons la largeur des colonnes pour nos éléments dans la grille implicite :

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

#parent {
	display: grid;
	grid-template-rows: 40px 40px;
	grid-auto-columns: 200px;
	border: 2px solid #696989;
	padding: 10px;
}
#parent > div {
	padding: 10px;
	border: 1px solid #696989;
}

Voir aussi

la propriété grid-auto-rows,
qui définit le nombre et la hauteur des rangées dans la grille implicite
la propriété grid-template-columns,
qui définit le nombre et la largeur des colonnes dans la grille