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