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

grid-auto-flow प्रॉपर्टी ग्रिड में तत्वों के स्वचालित प्लेसमेंट को निर्दिष्ट करती है। इसके मान हो सकते हैं row - पंक्तियों को तत्वों से भरती है, column - कॉलम, dense - ग्रिड में सभी खाली स्थानों पर तत्वों को रखती है; row dense - तत्वों को व्यवस्थित करती है, प्रत्येक पंक्ति और ग्रिड के सभी रिक्त स्थानों को भरती है; column dense - तत्वों से प्रत्येक कॉलम और ग्रिड में सभी रिक्त स्थान को भरती है।

सिंटैक्स

cssसेलेक्टर {
  grid-auto-flow: ग्रिड का भरने योग्य भाग;
}

उदाहरण

आइए टेबल में सभी पंक्तियों को भरें:

html<div id="parent">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
</div>

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

Результат:

उदाहरण

और अब टेबल के सभी कॉलम को तत्वों से भरें:

html<div id="parent">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
</div>

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

Результат:

उदाहरण

आइए टेबल में सभी तत्वों को इस प्रकार रखें कि कोई खाली जगह न बचे:

html<div id="parent">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
</div>

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

Результат:

उदाहरण

और अब आइए पंक्तियों में सभी खाली जगह को तत्वों से भरें:

html<div id="parent">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
</div>

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

Результат:

उदाहरण

आइए पिछले उदाहरण को बदलें, ताकि तत्व कॉलम में सभी खाली जगह को भर दें:

html<div id="parent">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
</div>

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

Результат:

यह भी देखें