सीएसएस ग्रिड आइटम
1
2
3
4
5
बाल तत्व (आइटम)
ग्रिड कंटेनर में ग्रिड आइटम होते हैं ।
डिफ़ॉल्ट रूप से, एक कंटेनर में प्रत्येक पंक्ति में प्रत्येक कॉलम के लिए एक ग्रिड आइटम होता है, लेकिन आप ग्रिड आइटम को स्टाइल कर सकते हैं ताकि वे कई कॉलम और/या पंक्तियों में फैले हों।
ग्रिड-कॉलम संपत्ति:
grid-columnसंपत्ति परिभाषित करती है कि किसी आइटम को किस कॉलम पर रखना है ।
आप परिभाषित करते हैं कि आइटम कहाँ से शुरू होगा, और आइटम कहाँ समाप्त होगा।
1
2
3
4
5
6
7
8
9
10
1 1
12
13
14
15
नोट: संपत्ति और संपत्तियों के लिए grid-columnएक आशुलिपि संपत्ति है ।grid-column-startgrid-column-end
किसी आइटम को रखने के लिए, आप लाइन नंबरों का उल्लेख कर सकते हैं , या कीवर्ड "स्पैन" का उपयोग करके यह परिभाषित कर सकते हैं कि आइटम कितने कॉलम में फैला होगा।
उदाहरण
कॉलम 1 से "आइटम 1" शुरू करें और कॉलम 5 से पहले समाप्त करें:
.item1 {
grid-column: 1 / 5;
}
उदाहरण
कॉलम 1 और स्पैन 3 कॉलम पर "आइटम 1" शुरू करें:
.item1 {
grid-column: 1 / span 3;
}
उदाहरण
कॉलम 2 और स्पैन 3 कॉलम पर "आइटम 2" शुरू करें:
.item2 {
grid-column: 2 / span 3;
}
ग्रिड-पंक्ति संपत्ति:
grid-rowसंपत्ति परिभाषित करती है कि किसी आइटम को किस पंक्ति में रखा जाए ।
आप परिभाषित करते हैं कि आइटम कहाँ से शुरू होगा, और आइटम कहाँ समाप्त होगा।
1
2
3
4
5
6
7
8
9
10
1 1
12
13
14
15
16
नोट: संपत्ति और संपत्तियों के लिए grid-rowएक आशुलिपि संपत्ति है ।grid-row-startgrid-row-end
किसी आइटम को रखने के लिए, आप लाइन नंबर का उल्लेख कर सकते हैं , या कीवर्ड "स्पैन" का उपयोग करके यह परिभाषित कर सकते हैं कि आइटम कितनी पंक्तियों में फैला होगा:
उदाहरण
"आइटम 1" को पंक्ति-पंक्ति 1 से प्रारंभ करें और पंक्ति-पंक्ति 4 पर समाप्त करें:
.item1 {
grid-row: 1 / 4;
}
उदाहरण
"आइटम 1" को पंक्ति 1 से शुरू करें और 2 पंक्तियों तक फैलाएँ:
.item1 {
grid-row: 1 / span 2;
}
ग्रिड-क्षेत्र संपत्ति
संपत्ति का उपयोग , , और संपत्तियों के grid-areaलिए आशुलिपि संपत्ति के रूप में किया जा सकता है
।grid-row-startgrid-column-startgrid-row-endgrid-column-end
1
2
3
4
5
6
7
8
9
10
1 1
12
13
14
15
उदाहरण
पंक्ति-पंक्ति 1 और स्तंभ-पंक्ति 2 पर "आइटम8" प्रारंभ करें, और पंक्ति-पंक्ति 5 और स्तंभ पंक्ति 6 पर समाप्त करें:
.item8 {
grid-area: 1 / 2 / 5 / 6;
}
उदाहरण
पंक्ति-पंक्ति 2 और स्तंभ-पंक्ति 1 पर "आइटम8" प्रारंभ करें, और 2 पंक्तियों और 3 स्तंभों को फैलाएं:
.item8 {
grid-area: 2 / 1 / span 2 / span 3;
}
नामकरण ग्रिड आइटम
संपत्ति का grid-areaउपयोग ग्रिड वस्तुओं को नाम निर्दिष्ट करने के लिए भी किया जा सकता है।
हैडर
मेन्यू
मुख्य
सही
फ़ुटबाल
grid-template-areasनामित ग्रिड आइटम को ग्रिड कंटेनर की संपत्ति द्वारा संदर्भित किया जा सकता है ।
उदाहरण
Item1 को "myArea" नाम मिलता है और पांच कॉलम ग्रिड लेआउट में सभी पांच कॉलम फैलाता है:
.item1 {
grid-area:
myArea;
}
.grid-container {
grid-template-areas: 'myArea myArea
myArea myArea myArea';
}
प्रत्येक पंक्ति को एपोस्ट्रोफिस (' ') द्वारा परिभाषित किया गया है
प्रत्येक पंक्ति में स्तंभों को एपोस्ट्रोफ़ के अंदर परिभाषित किया गया है, जो एक स्थान द्वारा अलग किया गया है।
नोट: एक अवधि चिह्न बिना किसी नाम के ग्रिड आइटम का प्रतिनिधित्व करता है।
उदाहरण
"माईएरिया" को पांच कॉलम ग्रिड लेआउट में दो कॉलम फैलाने दें (अवधि के संकेत बिना नाम वाले आइटम का प्रतिनिधित्व करते हैं):
.item1 {
grid-area:
myArea;
}
.grid-container {
grid-template-areas: 'myArea myArea
. . .';
}
दो पंक्तियों को परिभाषित करने के लिए, दूसरी पंक्ति के स्तंभ को एपोस्ट्रोफ़ के दूसरे सेट के अंदर परिभाषित करें:
उदाहरण
"आइटम 1" को दो कॉलम और दो पंक्तियों में बनाएं:
.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 कोड में पहले आइटम को ग्रिड में पहले आइटम के रूप में प्रकट होने की आवश्यकता नहीं है।
1
2
3
4
5
6
उदाहरण
.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; }
}