ग्रिड-टेम्पलेट-कॉलम्स गुण
grid-template-columns गुण
कॉलमों की संख्या और चौड़ाई निर्धारित करता है, जो
एलिमेंट ग्रिड या ग्रिड में घेरेगा।
यह गुण पैरेंट एलिमेंट में निर्दिष्ट किया जाता है
और चाइल्ड एलिमेंट्स के कॉलमों की चौड़ाई निर्धारित करता है।
गुण के मान में हम कॉलमों की चौड़ाई
किसी भी आकार की इकाइयों में निर्दिष्ट करते हैं।
गुणों में पिक्सेल में मान निर्दिष्ट करने पर
कॉलमों के आकार बिल्कुल उनके अनुरूप होंगे।
यदि हम auto शब्द निर्दिष्ट करते हैं, तो कॉलम
सभी उपलब्ध स्थान को भर देंगे।
fr (अंश) इकाई का उपयोग करने का अर्थ है,
कि सभी स्थान को समान भागों में विभाजित किया जाएगा।
fr का लाभ यह है कि यह विभिन्न कंटेनरों या स्क्रीन रेजोल्यूशन के लिए अनुकूलनीय है,
क्योंकि fr पिक्सेल में सटीक आकार से बंधे बिना उन्हें निर्दिष्ट संख्या में अंशों में विभाजित कर देता है।
सिंटैक्स
सिलेक्टर {
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: 50px 100px 200px 50px;
border: 2px solid #696989;
padding: 10px;
width: 400px;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
:
उदाहरण
आइए पहले और तीसरे कॉलम को पिक्सेल में निश्चित चौड़ाई दें, और दूसरा कॉलम स्वचालित रूप से उपलब्ध स्थान को भरने दें:
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
#parent {
display: grid;
grid-template-columns: 100px auto 150px;
border: 2px solid #696989;
padding: 10px;
width: 400px;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
:
उदाहरण
अब grid-template-columns गुण की सहायता से
ऐसा करें कि पहला और दूसरा
कॉलम कंटेनर का एक भाग घेरें,
और तीसरा कॉलम - तीन भाग:
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
#parent {
display: grid;
grid-template-columns: 1fr 1fr 3fr;
border: 2px solid #696989;
padding: 10px;
width: 400px;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
:
उदाहरण
fr इकाइयों में निर्दिष्ट मान
भिन्नात्मक रूप ले सकते हैं। आइए
पिछले उदाहरण को बदलें, दूसरे और तीसरे कॉलम की चौड़ाई
भिन्नात्मक संख्याओं में निर्दिष्ट करके:
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
#parent {
display: grid;
grid-template-columns: 1fr 0.5fr 2.5fr;
border: 2px solid #696989;
padding: 10px;
width: 400px;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
:
उदाहरण
आइए grid-template-columns गुण में
repeat() फ़ंक्शन निर्दिष्ट करें,
जो कंटेनर को बताएगा कि सभी
तीन कॉलमों की चौड़ाई समान होनी चाहिए:
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
#parent {
display: grid;
grid-template-columns: repeat(3, 1fr);
border: 2px solid #696989;
padding: 10px;
width: 400px;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
:
उदाहरण
अब आइए पिछले उदाहरण को बदलें ताकि तीन समान कॉलमों में एक चौथा जोड़ा जाए, जो कंटेनर के दो अंश घेरेगा:
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
#parent {
display: grid;
grid-template-columns: repeat(3, 1fr) 2fr;
border: 2px solid #696989;
padding: 10px;
width: 400px;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
:
उदाहरण
आइए पहले दो कॉलमों को कंटेनर के एक अंश में चौड़ाई दें और अंतिम दो कॉलमों को - दो अंशों में:
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
#parent {
display: grid;
grid-template-columns: repeat(2, 1fr) repeat(2, 2fr);
border: 2px solid #696989;
padding: 10px;
width: 400px;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
:
उदाहरण
अब आइए कॉलमों की चौड़ाई निर्धारित करें
repeat() फ़ंक्शन और मुक्त इकाइयों fr का उपयोग करके निर्दिष्ट मानों को संयोजित करके:
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
</div>
#parent {
display: grid;
grid-template-columns: repeat(2, 1fr) 3fr repeat(2, 2fr);
border: 2px solid #696989;
padding: 10px;
width: 400px;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
:
उदाहरण
repeat() फ़ंक्शन में
auto-fill मान भी निर्दिष्ट किया जा सकता है, जो हमारे कंटेनर को हमारी आवश्यक चौड़ाई के समान कॉलमों से भर देगा:
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
#parent {
display: grid;
grid-template-columns: repeat(auto-fill, 200px);
border: 2px solid #696989;
padding: 10px;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
:
उदाहरण
auto-fill के साथ-साथ
minmax फ़ंक्शन निर्दिष्ट करना बहुत सुविधाजनक है,
जो कॉलमों की चौड़ाई की सीमा न्यूनतम से अधिकतम मान तक निर्धारित करता है।
यदि कंटेनर की चौड़ाई सभी कॉलमों को समाहित नहीं कर पाती है,
तो उनमें से कुछ एक नई पंक्ति में चले जाएंगे,
जबकि पंक्ति में कॉलम उसमें समान रूप से वितरित हो जाएंगे। आइए पिछले उदाहरण को बदलें,
इसमें minmax फ़ंक्शन निर्दिष्ट करके।
कॉलमों के विभिन्न प्लेसमेंट विकल्पों को देखने के लिए
अपने ब्राउज़र के पेज की चौड़ाई बदलें:
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
#parent {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
border: 2px solid #696989;
padding: 10px;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
:
उदाहरण
अब आइए auto-fit गुण निर्दिष्ट करें,
जिसका auto-fill से अंतर यह है,
कि यह कॉलमों की संख्या को कंटेनर की उपलब्ध चौड़ाई के अनुरूप ढाल लेता है, उन्हें विस्तारित या संकुचित करके:
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
#parent {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
border: 2px solid #696989;
padding: 10px;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
:
उदाहरण
fr के साथ-साथ
% में मानों का भी उपयोग किया जा सकता है, जो यह भी निर्धारित करते हैं
कि कॉलम कंटेनर का कितना भाग घेरेगा।
इसके लिए पहले % में कॉलम के आकार की गणना की जाएगी,
और शेष खाली स्थान
अंशों में विभाजित कर दिया जाएगा:
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
#parent {
display: grid;
grid-template-columns: 50% 1fr 2fr 30%;
border: 2px solid #696989;
padding: 10px;
width: 400px;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
:
उदाहरण
आइए एक साथ गुणों का उपयोग करें
grid-template-columns और
grid-template-rows:
<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>9</div>
</div>
#parent {
display: grid;
grid-template-rows: 1fr 1fr 1fr;
grid-template-columns: 1fr 1fr 1fr;
border: 2px solid #696989;
padding: 10px;
width: 400px;
height: 400px;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
:
उदाहरण
आइए गुणों की सहायता से
grid-template-columns और
grid-template-rows
नौ कोशिकाओं वाली एक तालिका बनाएं, जो तीन पंक्तियों में स्थित हों।
इसके अलावा दूसरी और तीसरी पंक्ति की चौड़ाई समान होगी,
और प्रत्येक कॉलम - विभिन्न चौड़ाई का होगा:
<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>9</div>
</div>
#parent {
display: grid;
grid-template-rows: 60px 1fr 60px;
grid-template-columns: 20% 1fr 15%;
border: 2px solid #696989;
padding: 10px;
width: 400px;
height: 400px;
}
#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>9</div>
</div>
#parent {
display: grid;
grid-template-rows: 2fr 1fr 1fr;
grid-template-columns: 0.5fr 1fr 1fr;
border: 2px solid #696989;
padding: 10px;
width: 400px;
height: 400px;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
:
यह भी देखें
-
grid-template-rowsगुण,
जो ग्रिड में पंक्तियों की संख्या और चौड़ाई निर्धारित करता है -
grid-auto-columnsगुण,
जो अंतर्निहित ग्रिड में कॉलमों की संख्या और चौड़ाई निर्धारित करता है
