सीएसएस ग्रिड में ऑटो का मतलब
ग्रिड में पंक्तियों और कॉलम के आकार
निर्दिष्ट करते समय
मान auto का उपयोग किया जा सकता है। इस स्थिति में,
ब्लॉक केवल उपलब्ध
सभी मुक्त स्थान को भर देंगे
पिक्सेल में निर्दिष्ट उस चौड़ाई को
घटाने के बाद।
आइए उदाहरणों पर नजर डालें।
आइए पहले और तीसरे कॉलम को पिक्सेल में एक निश्चित चौड़ाई निर्दिष्ट करें, और दूसरा कॉलम स्वचालित रूप से शेष स्थान ले ले:
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
</div>
#parent {
display: grid;
grid-template-columns: 100px auto 150px;
border: 2px solid #696989;
padding: 10px;
width: 600px;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
:
चाइल्ड एलिमेंट्स को दो
कॉलम में व्यवस्थित करें: पहली की चौड़ाई 200px,
और दूसरा शेष स्थान ले ले।
चाइल्ड एलिमेंट्स को तीन
कॉलम में व्यवस्थित करें: पहली की चौड़ाई 100px,
दूसरी 150px, और तीसरी
शेष स्थान ले ले।
