Propriété grid-auto-flow

La propriété grid-auto-flow définit le placement automatique des éléments en grille. Peut avoir les valeurs row - remplit les lignes avec des éléments, column - les colonnes, dense - place les éléments sur tous les espaces vides dans la grille ; row dense - dispose les éléments en remplissant chaque ligne et tous les espaces libres de la grille ; column dense - remplit chaque colonne avec des éléments et tout l'espace libre dans la grille.

Syntaxe

sélecteur {
	grid-auto-flow: partie à remplir de la grille;
}

Exemple

Remplissons toutes les lignes dans le tableau :

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

#parent {
	display: grid;
	grid-auto-flow: row;
	grid-template-rows: 1fr 1fr;
	grid-template-columns: 1fr 1fr 2fr;
	border: 2px solid #696989;
	padding: 10px;
	width: 400px;
	height: 200px;
}
#parent > div {
	padding: 10px;
	border: 1px solid #696989;
}

Exemple

Et maintenant, remplissons toutes les colonnes avec des éléments dans le tableau :

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

#parent {
	display: grid;
	grid-auto-flow: column;
	grid-template-rows: 1fr 1fr;
	grid-template-columns: 1fr 1fr 2fr;
	border: 2px solid #696989;
	padding: 10px;
	width: 400px;
	height: 200px;
}
#parent > div {
	padding: 10px;
	border: 1px solid #696989;
}

Exemple

Plaçons tous les éléments dans le tableau pour qu'il ne reste plus d'espace libre :

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

#parent {
	display: grid;
	grid-auto-flow: dense;
	grid-template-rows: 1fr 1fr;
	grid-template-columns: 1fr 1fr 2fr;
	border: 2px solid #696989;
	padding: 10px;
	width: 400px;
	height: 200px;
}
#parent > div {
	padding: 10px;
	border: 1px solid #696989;
}

Exemple

Et maintenant, remplissons tout l'espace libre dans les lignes avec des éléments :

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

#parent {
	display: grid;
	grid-auto-flow: row dense;
	grid-template-rows: 1fr 1fr;
	grid-template-columns: 1fr 1fr 2fr;
	border: 2px solid #696989;
	padding: 10px;
	width: 400px;
	height: 200px;
}
#parent > div {
	padding: 10px;
	border: 1px solid #696989;
}

Exemple

Modifions l'exemple précédent, pour que les éléments remplissent tout l'espace libre dans les colonnes :

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

#parent {
	display: grid;
	grid-auto-flow: column dense;
	grid-template-rows: 1fr 1fr;
	grid-template-columns: 1fr 1fr 2fr;
	border: 2px solid #696989;
	padding: 10px;
	width: 400px;
	height: 200px;
}
#parent > div {
	padding: 10px;
	border: 1px solid #696989;
}

Voir aussi

la propriété grid,
qui définit la notation abrégée des propriétés des colonnes et des lignes
la propriété grid-auto-rows,
qui définit le nombre et la largeur des lignes dans la grille implicite
la propriété grid-template-columns,
qui définit le nombre et la largeur des colonnes dans la grille
la propriété grid-template-rows,
qui définit le nombre et la largeur des lignes dans la grille