Eigenschaft grid-auto-flow

Die Eigenschaft grid-auto-flow legt die automatische Platzierung von Elementen im Grid fest. Kann die Werte row - füllt die Zeilen mit Elementen, column - Spalten, dense - platziert Elemente auf alle freien Plätze im Grid; row dense - ordnet Elemente an, indem jede Zeile und alle freien Plätze des Grids gefüllt werden; column dense - füllt die Spalten mit Elementen und alle freien Plätze im Grid.

Syntax

Selektor {
	grid-auto-flow: zu füllender Teil des Grids;
}

Beispiel

Lassen Sie uns alle Zeilen in der Tabelle füllen:

<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;
}

Beispiel

Und jetzt füllen wir alle Spalten in der Tabelle mit Elementen:

<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;
}

Beispiel

Lassen Sie uns alle Elemente in der Tabelle so platzieren, dass kein freier Platz bleibt:

<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;
}

Beispiel

Und jetzt lassen Sie uns alle freien Plätze in den Zeilen mit Elementen füllen:

<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;
}

Beispiel

Lassen Sie uns das vorherige Beispiel ändern, damit die Elemente alle freien Plätze in den Spalten füllen:

<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;
}

Siehe auch

die Eigenschaft grid,
die eine Kurzschreibweise für Spalten- und Zeileneigenschaften festlegt
die Eigenschaft grid-auto-rows,
die die Anzahl und Breite der Zeilen im impliziten Grid festlegt
die Eigenschaft grid-template-columns,
die die Anzahl und Breite der Spalten im Grid festlegt
die Eigenschaft grid-template-rows,
die die Anzahl und Breite der Zeilen im Grid festlegt