लोड हो रहा है...

CSS Grid आइटम

Grid Container ने पैरेंट को चलाया — tracks, gap और सेल डिफ़ॉल्ट। Grid आइटम दूसरा सवाल पूछते हैं: हर बच्चा लाइन कैसे ले, track कवर करे और अपनी सेल में अलाइनमेंट बदलें? नामित areas से पहले लाइन प्लेसमेंट पर महारत हासिल करें।

Grid आइटम टूलकिट

📊 Grid आइटम एक नज़र में

प्रॉपर्टी	रोज़ का काम
`grid-column`	आइटम की कॉलम शुरू/अंत लाइनें सेट करता है (शॉर्टहैंड)
`grid-row`	आइटम की रो शुरू/अंत लाइनें सेट करता है (शॉर्टहैंड)
`span`	शुरू लाइन से N tracks तक आइटम खींचता है
`justify-self`	एक आइटम के लिए `justify-items` ओवरराइड (inline अक्ष)
`align-self`	एक आइटम के लिए `align-items` ओवरराइड (block अक्ष)
`place-self`	`align-self` + `justify-self` का शॉर्टहैंड

Grid लाइनें शुरू किनारे से गिनी जाती हैं। जो आइटम लाइन 1 से शुरू होकर लाइन 3 पर खत्म होता है, वह दो कॉलम tracks ढकता है। पहले लाइनों में सोचें; नामित areas बाद में आते हैं।

grid-column — कॉलम लाइनों पर बैठें

grid-column: start / end बच्चे को कॉलम लाइनों के बीच पिन करता है। साइडबार अक्सर पहले track पर बैठता है; मुख्य पैनल बाकी लेता है।

कॉलम लाइनों पर साइडबार

css

.board {
display: grid;
grid-template-columns: 14rem 1fr;
gap: 1rem;
}

.board__aside {
grid-column: 1 / 2;
}

.board__main {
grid-column: 2 / 3;
}

span — tracks पर फैलाएँ

span शुरू लाइन से tracks गिनता है। तीन-कॉलम बोर्ड पर पूरा चौड़ाई वाला हीरो अक्सर grid-column: 1 / span 3 लेता है।

हीरो तीन कॉलम ढकता है

css

.hero {
grid-column: 1 / span 3;
}

grid-row — रो लाइनों पर बैठें

block अक्ष पर वही विचार। बैनर को ऊपरी बैंड पर पिन करें, या span से ऊँचे कार्ड को दो रो tracks दें।

रो लाइनों पर बैनर

css

.banner {
grid-row: 1 / 2;
}

.tall-card {
grid-row: 2 / span 2;
}

कॉलम और रो साथ

जब एक बच्चे को साफ आयत चाहिए दोनों मिलाएँ — जैसे फीचर्ड टाइल जो दो कॉलम और एक रो ढके।

फीचर्ड टाइल span

css

.feature {
grid-column: 1 / span 2;
grid-row: 1 / 2;
}

place-self — एक आइटम, अलग सेल अलाइनमेंट

एक बच्चे के लिए कंटेनर के justify-items / align-items ओवरराइड करें। जब दोनों अक्ष मिलने चाहिए, place-self: center शांत शॉर्टहैंड है।

place-self ओवरराइड

css

.board {
display: grid;
justify-items: stretch;
align-items: stretch;
gap: 0.75rem;
}

.board .badge {
place-self: center;
}

शांत grid आइटम आदत

पहले कॉलम और रो लाइनों से रखें, जब बच्चा कई tracks चाहे तो span दें, फिर place-self से एक-एक अलाइनमेंट सँवारें। DOM क्रम समझदार रखें — order ट्रिक्स से बचें जो कीबोर्ड फोकस बिगाड़ें। नामित template areas Grid Areas पाठ के लिए छोड़ें।

नामित आइटम भूमिकाएँ

css

.shell__hero {
grid-column: 1 / -1;
}

.shell__aside {
grid-column: 1 / 2;
align-self: start;
}

.shell__main {
grid-column: 2 / 3;
}

खुद आज़माएँ

दो-कॉलम बोर्ड बनाएँ; aside को grid-column: 1 / 2 और main को 2 / 3 पर रखें।
grid-column: 1 / span 3 से तीन-कॉलम हीरो जोड़ें।
grid-row: 1 / 2 से बैनर पिन करें।
फीचर्ड टाइल को दो कॉलम और एक रो पर span करें।
place-self: center से एक badge केंद्रित करें और अगले पाठ के लिए नामित areas नोट करें।

आम गलतियाँ

span या लाइन नंबर कंटेनर पर लगाना, आइटम पर नहीं
भूलना कि लाइनें 1 से शुरू होती हैं और tracks को लाइनों जैसे गिनना
आइटम प्लेसमेंट को पैरेंट के justify-content पैकिंग से मिलाना
लाइन प्लेसमेंट मजबूत होने से पहले नामित grid-template-areas पर कूदना
order से दृश्य क्रम बदलकर tab/स्रोत क्रम तोड़ना

सारांश

Grid आइटम लाइन प्लेसमेंट, span और प्रति-आइटम अलाइनमेंट नियंत्रित करते हैं
grid-column / grid-row शुरू और अंत लाइनें पिन करते हैं
span शुरू लाइन से tracks पर फैलाता है
place-self (और self प्रॉप्स) एक बच्चे के लिए सेल अलाइनमेंट ओवरराइड करते हैं
नामित template areas अगले Grid Areas पाठ में आते हैं

🧠 अपने ज्ञान की परीक्षा करें

शुरू करने के लिए तैयार

अपने ज्ञान की परीक्षा करें

इस इंटरैक्टिव क्विज़ के साथ अपनी चुनौती लें और देखें कि आप विषय को कितनी अच्छी तरह समझते हैं

❓

प्रश्न

🎯

70%

पास करने के लिए

♾️

∞

समय

🔄

∞

प्रयास

📝 निर्देश

हर प्रश्न को ध्यान से पढ़ें
हर प्रश्न के लिए सबसे अच्छा उत्तर चुनें
आप जितनी बार चाहें क्विज़ दोबारा दे सकते हैं
आपकी प्रगति शीर्ष पर दिखाई जाएगी

भाषा