Grid-auto-flow hassaýaty

grid-auto-flow hassaýaty grid-de elementleriň awtomatik ýerleşişini kesgitleýär. row - hatarlary elementler bilen doldurýar, column - sütünleri, dense - elementleri grid-iň ähli boş ýerlerine ýerleşdirýär; row dense - elementleri her bir hatary we grid-iň ähli boş ýerlerini doldurýar; column dense - elementler bilen her bir sütüni we grid-deki ähli boş ýeri doldurýar.

Sintaksis

selektory {
	grid-auto-flow: grid-iň doldurýan bölegi;
}

Mysal

Meselem, tablisada ähli hatarlary dolduralyň:

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

Mysal

Indi bolsa, tablisadaky ähli sütünleri elementler bilen dolduralyň:

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

Mysal

Meselem, elementleri tablisada boş ýer galmaz ýaly ýerleşdireliň:

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

Mysal

Indi bolsa, hatarlardaky ähli boş ýeri elementler bilen dolduralyň:

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

Mysal

Öňki mysaly elementler sütünlerdäki ähli boş ýeri dolduracak ýaly üýtgedeliň:

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

Şeýle-de göz aýlaň

grid hassaýaty,
sütün we hatar hassaýatlarynyň gysgaça ýazgysyny kesgitleýär
grid-auto-rows hassaýaty,
görkezilmedik grid-de hatarlaryň sanyny we giňligini kesgitleýär
grid-template-columns hassaýaty,
grid-de sütünleriň sanyny we giňligini kesgitleýär
grid-template-rows hassaýaty,
grid-de hatarlaryň sanyny we giňligini kesgitleýär