ग्रिड-ऑटो-फ्लो प्रॉपर्टी

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 प्रॉपर्टी,
जो ग्रिड में पंक्तियों की संख्या और चौड़ाई निर्दिष्ट करती है