Хусусияти 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,
ки миқдор ва паҳнои сатрҳоро дар грид муқаррар мекунад