Grid-auto-flow xassəsi

grid-auto-flow xassəsi grid-də elementlərin avtomatik yerləşdirilməsini təyin edir. row - sıraları elementlərlə doldurur, column - sütunları, dense - elementləri grid-dəki bütün boş yerlərə yerləşdirir; row dense - elementləri hər sıranı və grid-dəki bütün boş yerləri dolduraraq yerləşdirir; column dense - sütunları elementlərlə doldurur və grid-dəki bütün boş yerləri doldurur.

Sintaksis

selektor {
	grid-auto-flow: grid-in doldurulan hissəsi;
}

Nümunə

Gəlin cədvəldə bütün sıraları dolduraq:

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

Nümunə

İndi isə cədvəldəki bütün sütunları elementlərlə dolduraq:

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

Nümunə

Gəlin bütün elementləri cədvəldə elə yerləşdirək ki, boş yer qalması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;
}

Nümunə

İndi gəlin elementlərlə sıralardakı bütün boş yerləri dolduraq:

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

Nümunə

Gəlin əvvəlki nümunəni dəyişərək, elementlərin sütunlardakı bütün boş yerləri doldurmasını təmin edək:

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

Həmçinin bax

grid xassəsi,
sütun və sıra xassələrinin qısaldılmış qeydini təyin edir
grid-auto-rows xassəsi,
gizli grid-də sıraların sayını və enini təyin edir
grid-template-columns xassəsi,
grid-də sütunların sayını və enini təyin edir
grid-template-rows xassəsi,
grid-də sıraların sayını və enini təyin edir