grid-auto-flow хусусияти

grid-auto-flow хусусияти гридда элементларни автоматик жойлаштиришни белгилайди. row - қаторларни элементлар билан тўлдириш, column - устунларни тўлдириш, dense - элементларни тордаги барча бўш жойларга жойлаштириш; row dense - ҳар бир қаторни ва торнинг барча бўш жойларини элементлар билан тўлдириш; column dense - ҳар бир устунни ва гриддаги барча бўш жойларни элементлар билан тўлдириш.

Синтаксис

селектор {
	grid-auto-flow: гриднинг тўлдириладиган қисми;
}

Мисол

Келинг, жадвалдаги барча қаторларни тўлдирамиз:

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

Мисол

Энди эса жадвалдаги барча устунларни элементлар билан тўлдирамиз:

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

Мисол

Келинг, барча элементларни жадвалда бўш жой қолмайдиган қилиб жойлаштирамиз:

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

Мисол

Энди эса элементлар билан қаторлардаги барча бўш жойларни тўлдирамиз:

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

Мисол

Келинг, олдинги мисолни ўзгартириб, элементлар устунлардаги барча бўш жойларни тўлдирсин:

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

Қуйидаларни ҳам кўринг

grid хусусияти,
устунлар ва қаторлар хусусиятларининг қисқартирилган ёзиши
grid-auto-rows хусусияти,
ноаник гриддаги қаторлар сони ва энини белгилайди
grid-template-columns хусусияти,
гриддаги устунлар сони ва энини белгилайди
grid-template-rows хусусияти,
гриддаги қаторлар сони ва энини белгилайди