ग्रिड-ऑटो-कॉलम्स प्रॉपर्टी

grid-auto-columns प्रॉपर्टी अव्यक्त ग्रिड में तत्व द्वारा घेरे जाने वाले कॉलमों की संख्या और चौड़ाई निर्धारित करती है। अव्यक्त ग्रिड - वह ग्रिड जो स्वचालित रूप से बनता है, जब तत्व पहले से परिभाषित ग्रिड की सीमाओं से बाहर निकल जाते हैं। प्रॉपर्टी के मान में हम कॉलमों की चौड़ाई किसी भी आकार इकाई में निर्दिष्ट करते हैं। प्रॉपर्टी मूल तत्व में निर्दिष्ट की जाती है और चाइल्ड तत्वों के कॉलमों की चौड़ाई निर्धारित करती है।

सिंटैक्स

cssसिलेक्टर {
  grid-auto-columns: कॉलम की चौड़ाई;
}

उदाहरण

आइए हमारे अव्यक्त ग्रिड में तत्वों के लिए कॉलमों की चौड़ाई निर्धारित करें:

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-template-rows: 40px 40px;
  grid-auto-columns: 200px;
  border: 2px solid #696989;
  padding: 10px;
}
#parent > div {
  padding: 10px;
  border: 1px solid #696989;
}

Результат:

यह भी देखें