CSS Grid एरिया
Grid Items ने लाइन नंबर और span सिखाए। नामित areas दोस्ताना सवाल पूछते हैं: क्या आप पेज को शब्दों से खींच सकते हैं — header, sidebar, main, footer — और हर बच्चा वही लेबल ले? नक्शा grid-template-areas है; पिन grid-area।
Grid areas टूलकिट
📊 Grid areas एक नज़र में
| प्रॉपर्टी / टोकन | रोज़ का काम |
|---|---|
grid-template-areas |
कंटेनर पर: कोट की गई रो स्ट्रिंग्स हर सेल का नाम देती हैं |
grid-area |
आइटम पर: वह बच्चा किस नामित क्षेत्र में बैठता है |
| दोहराया नाम | आस-पास की सेलों में वही नाम = एक फैला आयत |
. (बिंदु) |
बिना नाम की खाली सेल |
| टेम्पलेट tracks | आकार अभी भी grid-template-columns / rows से सेट करें |
हर कोट की गई स्ट्रिंग नक्शे की एक रो है। रो के अंदर नाम स्पेस से अलग होते हैं। हर रो में सेलों की संख्या एक जैसी होनी चाहिए, वरना टेम्पलेट अमान्य है।
grid-template-areas — नक्शा खींचें
जो लेआउट मतलब है, सादे लेबल में लिखें। क्लासिक पेज शेल अक्सर तीन रो पर चार नामित भूमिकाएँ दिखाता है।
.shell {
display: grid;
grid-template-columns: 14rem 1fr;
grid-template-rows: auto 1fr auto;
grid-template-areas:
"header header"
"aside main"
"footer footer";
gap: 1rem;
}
grid-area — हर बच्चे को पिन करें
हर बच्चा नक्शे से एक नाम चुनता है। क्लास BEM-स्टाइल रह सकती है; Grid एरिया टोकन पढ़ता है।
.shell__header { grid-area: header; }
.shell__aside { grid-area: aside; }
.shell__main { grid-area: main; }
.shell__footer { grid-area: footer; }
नाम दोहराकर फैलाएँ
क्षेत्र फैलाने के लिए, हर सेल में वही नाम लिखें जो उसमें होना चाहिए। क्षेत्र ठोस आयत रहे — L-आकार मना।
.magazine {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-areas:
"hero hero hero"
"card1 card2 card3";
gap: 0.75rem;
}
.magazine__hero { grid-area: hero; }
बिंदु से खाली सेल
अकेला . एक छेद चिह्नित करता है। जब कार्ड बोर्ड को झूठा नाम बनाए बिना जगह छोड़नी हो, काम आता है।
.board {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-areas:
"alpha ."
"beta gamma";
gap: 0.5rem;
}
.board__a { grid-area: alpha; }
.board__b { grid-area: beta; }
.board__c { grid-area: gamma; }
शांत नामित-areas आदत
पहले grid-template-areas में नक्शा खींचें, columns/rows से tracks का आकार दें, फिर बच्चों को grid-area से पिन करें। नाम छोटे और आयताकार रखें। जब एक-बार प्लेसमेंट पूरे नक्शे को फिर लिखने से साफ हो, grid-column / grid-row पर लौटें। नक्शे के रेस्पॉन्सिव बदलाव Grid Responsive के लिए रहें।
.page {
display: grid;
grid-template-columns: minmax(12rem, 16rem) 1fr;
grid-template-areas:
"nav content"
"nav content";
gap: 1.25rem;
}
.page__nav { grid-area: nav; }
.page__content { grid-area: content; }
खुद आज़माएँ
grid-template-areasसे header / aside+main / footer नक्शा खींचें।- चार बच्चों को मिलते-जुलते
grid-areaमान दें। - तीन-कॉलम हीरो बनाएँ जो पहली रो पर
heroदोहराए। - दो-बटा-दो बोर्ड में
.से एक सेल खाली छोड़ें। - track आकार कंटेनर पर रखें; अगले रेस्पॉन्सिव Grid पाठ के लिए नक्शा बदलना नोट करें।
आम गलतियाँ
- L-आकार या टूटा क्षेत्र नाम देना (areas आयत होने चाहिए)
- कोट की गई रो के बीच सेल गिनती मेल न खाना
grid-template-areasबच्चे पर लगाना, कंटेनर पर नहीं- एरिया नामों को CSS क्लास सिलेक्टर समझना — ये टेम्पलेट टोकन हैं
grid-template-columns/rowsहटाकर सिर्फ नामों से आकार की उम्मीद करना
सारांश
- नामित areas लेआउट को पढ़ने योग्य सेल नक्शा बनाते हैं
grid-template-areasकंटेनर पर रहता है;grid-areaहर आइटम पर- Span के लिए नाम दोहराएँ; खाली सेल के लिए
.लगाएँ - क्षेत्र आयताकार रखें और नामों को track आकार से जोड़ें
- लाइन प्लेसमेंट अभी भी काम करता है; रेस्पॉन्सिव नक्शा बदलाव अगले हैं
🧠 अपने ज्ञान की परीक्षा करें
अपने ज्ञान की परीक्षा करें
इस इंटरैक्टिव क्विज़ के साथ अपनी चुनौती लें और देखें कि आप विषय को कितनी अच्छी तरह समझते हैं
📝 निर्देश
- हर प्रश्न को ध्यान से पढ़ें
- हर प्रश्न के लिए सबसे अच्छा उत्तर चुनें
- आप जितनी बार चाहें क्विज़ दोबारा दे सकते हैं
- आपकी प्रगति शीर्ष पर दिखाई जाएगी