A grid-auto-flow tulajdonság

A grid-auto-flow tulajdonság határozza meg az elemek automatikus elhelyezését a grid rendszerben. Lehetséges értékei: row - kitölti a sorokat elemekkel, column - oszlopokat, dense - az elemeket a rács minden üres helyére elhelyezi; row dense - az elemeket úgy helyezi el, hogy kitölti minden sort és a rács minden szabad helyét; column dense - kitölti az elemekkel minden oszlopot és a grid minden szabad helyét.

Szintaxis

selector {
	grid-auto-flow: a grid kitöltendő része;
}

Példa

Töltsük ki a táblázatban az összes sort:

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

Példa

Most pedig töltsük ki az elemekkel az összes oszlopot a táblázatban:

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

Példa

Helyezzük el az összes elemet a táblázatban úgy, hogy ne maradjon szabad hely:

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

Példa

Most pedig töltsük ki az elemekkel a sorok minden szabad helyét:

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

Példa

Módosítsuk az előző példát úgy, hogy az elemek kitöltik az oszlopok minden szabad helyét:

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

Lásd még

a grid tulajdonság,
amely meghatározza az oszlopok és sorok tulajdonságainak rövidített írásmódját
a grid-auto-rows tulajdonság,
amely meghatározza a sorok számát és szélességét az implicit gridben
a grid-template-columns tulajdonság,
amely meghatározza az oszlopok számát és szélességét a gridben
a grid-template-rows tulajdonság,
amely meghatározza a sorok számát és szélességét a gridben