grid-auto-flow Özelliği

grid-auto-flow özelliği, grid içindeki elemanların otomatik yerleşimini belirler. row - satırları elemanlarla doldurur, column - sütunları doldurur, dense - elemanları griddeki tüm boş yerlere yerleştirir; row dense - elemanları her satırı doldurarak ve griddeki tüm boş alanları doldurarak yerleştirir; column dense - elemanları her sütunu doldurur ve griddeki tüm boş alanları doldurur.

Sözdizimi

seçici {
	grid-auto-flow: doldurulacak grid kısmı;
}

Örnek

Tablodaki tüm satırları dolduralım:

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

Örnek

Şimdi tablodaki tüm sütunları elemanlarla dolduralım:

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

Örnek

Tüm elemanları tabloya yerleştirelim, böylece boş alan kalmasın:

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

Örnek

Şimdi elemanlarla satırlardaki tüm boş alanı dolduralım:

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

Örnek

Önceki örneği değiştirelim, böylece elemanlar sütunlardaki tüm boş alanı doldursun:

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

Ayrıca bakınız

sütun ve satır özelliklerinin kısaltılmış yazımını belirleyen grid özelliği
örtük griddeki satır sayısını ve genişliğini belirleyen grid-auto-rows özelliği
griddeki sütun sayısını ve genişliğini belirleyen grid-template-columns özelliği
griddeki satır sayısını ve genişliğini belirleyen grid-template-rows özelliği