CSS में इम्प्लिसिट ग्रिड

इम्प्लिसिट ग्रिड ब्राउज़र द्वारा स्वचालित रूप से बनाई जाती है, जब तत्वों की संख्या एक्सप्लिसिट ग्रिड में फिट नहीं होती। आइए देखें कि यह कैसे होता है।

मान लीजिए कि हमारे पास चार ब्लॉक हैं:

html<div id="parent">
  <div id="elem1">1</div>
  <div id="elem2">2</div>
  <div id="elem3">3</div>
  <div id="elem3">4</div>
</div>

मान लीजिए कि हमारी ग्रिड का आकार है 3 बाय 3:

css#parent {
  display: grid;
  grid-template-columns: 50px 50px 50px;
  grid-template-rows: 50px 50px 50px;
}

आइए हमारे तीन ब्लॉकों को ग्रिड पर रखें:

css#elem1 {
  grid-row: 1 / 2;
  grid-column: 1 / 2;
}
#elem2 {
  grid-row: 2 / 3;
  grid-column: 2 / 3;
}
#elem3 {
  grid-row: 3 / 4;
  grid-column: 3 / 4;
}

और चौथे ब्लॉक को चौथी पंक्ति और कॉलम में रखें:

css#elem4 {
  grid-row: 4 / 5;
  grid-column: 4 / 5;
}

चूंकि हमारी ग्रिड का आकार 3 बाय 3 है, इसलिए इस ग्रिड में चौथी पंक्ति और कॉलम मौजूद नहीं होगी। लेकिन यह एक्सप्लिसिट रूप में मौजूद नहीं होगी, यानी हमारे द्वारा परिभाषित में। लेकिन ब्राउज़र उन्हें इम्प्लिसिट रूप से बना देगा, यानी खुद ही।

इस मामले में, चूंकि हमने आकार केवल एक्सप्लिसिट ग्रिड के लिए निर्दिष्ट किए हैं, इसलिए इस ग्रिड के बाहर की कोशिकाओं के आकार ब्राउज़र द्वारा गणना किए जाएंगे। यानी हमारे मामले में चौथे ब्लॉक के आकार ब्राउज़र द्वारा स्वचालित रूप से सेट कर दिए जाएंगे।

आइए देखें कि हमें क्या मिलता है:

html<div id="parent">
  <div id="elem1">1</div>
  <div id="elem2">2</div>
  <div id="elem3">3</div>
  <div id="elem4">4</div>
</div>

css#parent {
  display: grid;
  grid-template-columns: 50px 50px 50px;
  grid-template-rows: 50px 50px 50px;
  border: 2px solid #696989;
  padding: 10px;
  width: 400px;
  height: 400px;
}
#parent > div {
  padding: 10px;
  border: 1px solid #696989;
}
#elem1 {
  grid-row: 1 / 2;
  grid-column: 1 / 2;
}
#elem2 {
  grid-row: 2 / 3;
  grid-column: 2 / 3;
}
#elem3 {
  grid-row: 3 / 4;
  grid-column: 3 / 4;
}
#elem4 {
  grid-row: 4 / 5;
  grid-column: 4 / 5;
}

Результат: