सीएसएस ग्रिड में कॉलम की संख्या और चौड़ाई

ग्रिड में काम करने का परिचय हम इससे शुरू करेंगे कि हम कॉलम की संख्या और चौड़ाई निर्दिष्ट करेंगे, जिनके अनुदिश चाइल्ड एलिमेंट्स व्यवस्थित होंगे। इस उद्देश्य के लिए हम प्रॉपर्टी grid-template-columns का उपयोग करेंगे, जो पैरेंट एलिमेंट में निर्दिष्ट की जाती है और कॉलम की संख्या और चौड़ाई निर्धारित करती है, जो ग्रिड में चाइल्ड एलिमेंट्स द्वारा घेरी जाएगी। प्रॉपर्टी के वैल्यू में हम कॉलम की चौड़ाई पिक्सेल में निर्दिष्ट करते हैं।

उदाहरण

आइए सबसे पहले एक पैरेंट एलिमेंट बनाते हैं और इसे एक ग्रिड कंटेनर बनाते हैं। मान लीजिए कि हमारे पास एक div है, जिसमें चार चाइल्ड एलिमेंट्स हैं। इसके लिए प्रॉपर्टी display में वैल्यू grid सेट करें, और प्रॉपर्टी grid-template-columns में दो कॉलम के लिए चौड़ाई लिखें:

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

css#parent {
  display: grid;
  grid-template-columns: 200px 400px;
  border: 2px solid #696989;
  padding: 10px;
  width: 600px;
}
#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>6</div>
  <div>7</div>
  <div>8</div>
</div>

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

Результат:

प्रायोगिक कार्य