CSS ग्रिड इटम
- पिछला पृष्ठ CSS ग्रिड कंटेनर
- अगला पृष्ठ CSS इंस्टेंस
उपसंख्याक तत्व (प्रकल्प)
ग्रिड कंटेनर ग्रिड प्रकल्प को शामिल करता है。
मूलभूत रूप से, कंटेनर प्रत्येक पंक्ति के प्रत्येक स्तम्भ में एक ग्रिड प्रकल्प है, लेकिन आप ग्रिड प्रकल्प के शैली को सेट कर सकते हैं, ताकि वे कई स्तम्भों और/या पंक्तियों को चौड़ा कर सकें。
ग्रिड-कॉलम गुण:
ग्रिड-कॉलम गुण इस प्रकल्प को किस स्तम्भ में रखने को निर्दिष्ट करता है。
आप प्रयोज्या के शुरूआती स्थान और समाप्ती स्थान को निर्दिष्ट कर सकते हैं。
हर पंक्ति में स्तम्भों को शीर्षकों में निर्दिष्ट किया जाता है और खाली जगहों से अलग करता है।ग्रिड-कॉलम ग्रिड-कॉलम-स्टार्ट और ग्रिड-कॉलम-एंड गुणों के लिए एक सरल गुण है。
यदि किसी प्रकल्प को स्थापित करना है, आप लाइन संख्या (line numbers) का प्रयोग कर सकते हैं या "span" शब्द का प्रयोग करके इस प्रकल्प को कितने स्तम्भों तक चौड़ा करने को निर्दिष्ट कर सकते हैं。
इंस्टेंस
इसके लिए 'item1' को पहले स्तम्भ से शुरू करें और 5वें स्तम्भ से पहले समाप्त हों:
"myArea" को पांच स्तम्भों वाले ग्रिड लेआउट में दो स्तम्भों में खिसकाना है (दूरी कोटा गैर-नामक ग्रिड आइटम के रूप में प्रदर्शित किया जाता है): grid-column: 1 / 5; }
इंस्टेंस
इसके लिए 'item1' को पहले स्तम्भ से शुरू करें और 3 स्तम्भों में फैलाएं:
"myArea" को पांच स्तम्भों वाले ग्रिड लेआउट में दो स्तम्भों में खिसकाना है (दूरी कोटा गैर-नामक ग्रिड आइटम के रूप में प्रदर्शित किया जाता है): grid-column: 1 / span 3; }
इंस्टेंस
इसके लिए 'item2' को दूसरे स्तम्भ से शुरू करें और 3 स्तम्भों में फैलाएं:
.item2 {
grid-column: 2 / span 3;
}
grid-row पैरामीटर:
grid-row पैरामीटर इस प्रयोज्या को किस पंक्ति पर स्थापित करने का निर्देश देता है。
आप प्रयोज्या के शुरूआती स्थान और समाप्ती स्थान को निर्दिष्ट कर सकते हैं。
हर पंक्ति में स्तम्भों को शीर्षकों में निर्दिष्ट किया जाता है और खाली जगहों से अलग करता है।grid-row पैरामीटर grid-row-start और grid-row-end पैरामीटरों के लिए लघुरूप पैरामीटर है。
यदि आप प्रयोज्या को स्थापित करना चाहते हैं, तो आप पंक्ति संख्या को उदाहरण कर सकते हैं या 'span' शब्द का उपयोग करके इस प्रयोज्या को कितनी पंक्तियों तक फैलाना चाहते हैं, इसे निर्दिष्ट कर सकते हैं:
इंस्टेंस
इसके लिए 'item1' को row-line 1 से शुरू करें और row-line 4 पर समाप्त हों:
"myArea" को पांच स्तम्भों वाले ग्रिड लेआउट में दो स्तम्भों में खिसकाना है (दूरी कोटा गैर-नामक ग्रिड आइटम के रूप में प्रदर्शित किया जाता है): grid-row: 1 / 4; }
इंस्टेंस
इसके लिए 'item1' को पहली पंक्ति से शुरू करें और 2 पंक्तियों में फैलाएं:
"myArea" को पांच स्तम्भों वाले ग्रिड लेआउट में दो स्तम्भों में खिसकाना है (दूरी कोटा गैर-नामक ग्रिड आइटम के रूप में प्रदर्शित किया जाता है): grid-row: 1 / span 2; }
grid-area पैरामीटर
grid-area पैरामीटर को grid-row-start, grid-column-start, grid-row-end और grid-column-end पैरामीटरों के लिए लघुरूप पैरामीटर के रूप में उपयोग किया जा सकता है。
इंस्टेंस
इसके लिए 'item8' को row-line 1 और column-line 2 से शुरू करें और row-line 5 और column line 6 पर समाप्त हों:
.item8 {
grid-area: 1 / 2 / 5 / 6;
}
इंस्टेंस
इसके लिए 'item8' को row-line 2 और column-line से शुरू करें और 2 पंक्तियों और 3 स्तम्भों में फैलाएं:
.item8 {
grid-area: 2 / 1 / span 2 / span 3;
}
नामकरण ग्रिड प्रयोज्या
grid-area पैरामीटर को ग्रिड प्रयोज्या को नाम देने के लिए भी उपयोग किया जा सकता है。
ग्रिड कंटेनर के grid-template-areas पैरामीटर को नामकरण ग्रिड प्रयोज्या को उदाहरण के लिए उपयोग किया जा सकता है。
इंस्टेंस
item1 का नाम 'मेरा-क्षेत्र' है और यह पांच स्तम्भ ग्रिड लेआउट के सभी पांच स्तम्भों में फैला हुआ है:
"myArea" को पांच स्तम्भों वाले ग्रिड लेआउट में दो स्तम्भों में खिसकाना है (दूरी कोटा गैर-नामक ग्रिड आइटम के रूप में प्रदर्शित किया जाता है):
.item1 {
}
.grid-container {
grid-template-areas: 'मेरा-क्षेत्र मेरा-क्षेत्र मेरा-क्षेत्र मेरा-क्षेत्र मेरा-क्षेत्र';
}
每行由撇号（' '）定义。
हर पंक्ति एक शीर्षक (अनुवाद नहीं किया गया) से परिभाषित होती है।
हर पंक्ति में स्तम्भों को शीर्षकों में निर्दिष्ट किया जाता है और खाली जगहों से अलग करता है।टिप्पणी:
इंस्टेंस
दूरी कोटा गैर-नामक ग्रिड आइटम को प्रदर्शित करता है。
"myArea" को पांच स्तम्भों वाले ग्रिड लेआउट में दो स्तम्भों में खिसकाना है (दूरी कोटा गैर-नामक ग्रिड आइटम के रूप में प्रदर्शित किया जाता है):
.item1 {
}
.grid-container {
grid-area: myArea;
}
grid-template-areas: 'myArea myArea . . .';
इंस्टेंस
यदि "item1" को दो स्तम्भ और दो पंक्तियों में पारस्परिक रूप से खिसकाना है, तो दूसरे शीर्षकों में दूसरी पंक्ति के स्तम्भों को निर्दिष्ट करें:
.grid-container {
grid-template-areas: 'myArea myArea . . .' 'myArea myArea . . .';
}
इंस्टेंस
सभी आइटमों का नाम करें और एक हमेशा के लिए उपलब्ध वेब पेज टेम्पलेट बनाएं:
.item1 { grid-area: header; }
.item2 { grid-area: menu; }
.item3 { grid-area: main; }
.item4 { grid-area: right; }
.item5 { grid-area: footer; }
.grid-container {
grid-template-areas:
'header header header header header header'
'menu main main main right right'
'menu footer footer footer footer footer';
}
आइटम की क्रमवारी
ग्रिड लेआउट हमें आइटम को अपने पसंदीदा किसी स्थान पर रखने देता है。
HTML कोड में पहला आइटम ग्रिड में पहला नहीं दिखाया जाना चाहिए。
इंस्टेंस
.item1 { grid-area: 1 / 3 / 2 / 4; }
.item2 { grid-area: 2 / 3 / 3 / 4; }
.item3 { grid-area: 1 / 1 / 2 / 2; }
.item4 { grid-area: 1 / 2 / 2 / 3; }
.item5 { grid-area: 2 / 1 / 3 / 2; }
.item6 { grid-area: 2 / 2 / 3 / 3; }
आपको मीडिया क्वेरी का उपयोग करके कुछ स्क्रीन आकारों की क्रमवारी को पुन: व्यवस्थित कर सकते हैं:
इंस्टेंस
@media only screen and (max-width: 500px) {
.item1 { grid-area: 1 / span 3 / 2 / 4; }
.item2 { grid-area: 3 / 3 / 4 / 4; }
.item3 { grid-area: 2 / 1 / 3 / 2; }
.item4 { grid-area: 2 / 2 / span 2 / 3; }
.item5 { grid-area: 3 / 1 / 4 / 2; }
.item6 { grid-area: 2 / 3 / 3 / 4; }
}
- पिछला पृष्ठ CSS ग्रिड कंटेनर
- अगला पृष्ठ CSS इंस्टेंस
