grid-auto-flow xususiyati

grid-auto-flow xususiyati griddagi elementlarning avtomatik joylashuvini belgilaydi. row - qatorlarni elementlar bilan to'ldirish, column - ustunlarni to'ldirish, dense - elementlarni griddagi barcha bo'sh joylarga joylashtirish; row dense - elementlarni har bir qatorni va griddagi barcha bo'sh joylarni to'ldirib joylashtirish; column dense - elementlar bilan har bir ustun va griddagi barcha bo'sh joylarni to'ldirish.

Sintaksis

selektor {
	grid-auto-flow: gridning to'ldiriladigan qismi;
}

Misol

Keling, jadvaldagi barcha qatorlarni to'ldiramiz:

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

Misol

Endi esa jadvaldagi barcha ustunlarni elementlar bilan to'ldiramiz:

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

Misol

Keling, barcha elementlarni jadvalda hech qanday bo'sh joy qolmasligi uchun joylashtiramiz:

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

Misol

Endi keling, elementlar bilan qatorlardagi barcha bo'sh joylarni to'ldiramiz:

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

Misol

Keling, oldingi misolni o'zgartiramiz, elementlar ustunlardagi barcha bo'sh joylarni to'ldirishi uchun:

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

Shuningdek qarang

grid xususiyati,
ustunlar va qatorlar xususiyatlarining qisqartirilgan yozuvini belgilaydi
grid-auto-rows xususiyati,
yashirin griddagi qatorlar soni va kengligini belgilaydi
grid-template-columns xususiyati,
griddagi ustunlar soni va kengligini belgilaydi
grid-template-rows xususiyati,
griddagi qatorlar soni va kengligini belgilaydi