CSS Grid
Flexbox ने आइटमों को एक दिशा में सजाया। CSS Grid अगला अध्याय खोलता है: पंक्तियाँ और कॉलम साथ. display: grid चालू करें, ट्रैक स्केच करें, gap जोड़ें, फिर Grid Container, Items, Areas और Responsive पाठों में गहराई से जाएँ।
Grid की शुरुआती टूलकिट
📊 Grid एक नज़र में
| विचार | रोज़ का काम |
|---|---|
| Grid कंटेनर | वह पैरेंट जिस पर display: grid (या inline-grid) हो |
| Grid आइटम | सीधे बच्चे जो ग्रिड में बैठते हैं |
| ट्रैक | पंक्तियाँ और कॉलम जो जाली बनाते हैं |
| सेल / क्षेत्र | जहाँ आइटम उतरते हैं (क्षेत्र बाद के पाठ में) |
gap |
मार्जिन ट्रिक के बिना ट्रैकों के बीच गटर |
fr इकाई |
बची जगह ट्रैकों में बाँटना (झलक) |
Grid को पेज के लिए ग्राफ़ पेपर समझें: पहले कॉलम और पंक्तियाँ खींचें, फिर कंटेंट सेलों में डालें। टूलबार और एक-अक्षीय समूहों के लिए Flexbox अभी भी बेहतरीन रहता है।
display: grid — जाली चालू करें
पैरेंट पर display: grid लगाएँ। बच्चे अपने आप ग्रिड आइटम बन जाते हैं — बुनियादी मॉडल के लिए कोई अतिरिक्त क्लास नहीं चाहिए।
.board {
display: grid;
}
पहले कॉलम — एक सरल टेम्पलेट
grid-template-columns ऊर्ध्वाधर ट्रैक तय करता है। तीन बराबर कॉलम कार्ड या टाइल के लिए शांत शुरुआती स्केच है।
.board {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
}
gap — ईमानदार गटर
gap (या row-gap / column-gap) इस्तेमाल करें ताकि ट्रैक रीफ़्लो होने पर स्पेसिंग एक जैसी रहे। हर बच्चे पर मार्जिन छिड़कने से बेहतर gap चुनें।
.board {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1rem;
}
एक छोटी कार्ड मैट्रिक्स
गैलरी स्केच जैसा ही विचार — बराबर ट्रैक प्लस gap — लेकिन अब आप Grid की भाषा बोल रहे हैं, सिर्फ flex-wrap नहीं।
.cards {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1.25rem;
}
.cards__item {
min-height: 8rem;
}
fr — बची जगह बाँटें
fr इकाई खाली जगह को ट्रैकों में बाँटती है। जगह बचने पर 2fr 1fr पहला कॉलम दूसरे से दोगुना चौड़ा बनाता है।
.shell {
display: grid;
grid-template-columns: 2fr 1fr;
gap: 1.5rem;
}
एक शांत Grid आदत
द्वि-आयामी पेज शेल और मैट्रिक्स के लिए Grid इस्तेमाल करें। एक-आयामी पंक्तियों के लिए Flexbox रखें। display: grid, सरल grid-template-columns और gap से शुरू करें। गहरी ऑटो-प्लेसमेंट, नामित क्षेत्र और रिस्पॉन्सिव Grid ट्रैक अगले पाठों के लिए छोड़ दें।
.page {
display: grid;
grid-template-columns: 1fr 16rem;
gap: 1.5rem;
}
.page__main,
.page__rail {
min-width: 0;
}
खुद आज़माएँ
display: gridवाला कंटेनर बनाएँ।grid-template-columns: repeat(3, 1fr)सेट करें।- ट्रैकों के बीच
gap: 1remजोड़ें। - main + rail शेल के लिए
2fr 1frआज़माएँ। - एक वाक्य लिखें: आप कब अभी भी Flexbox चुनेंगे?
आम गलतियाँ
- बिना लेआउट ज़रूरत हर एलिमेंट पर
display: gridलगाना - सिर्फ Flexbox wrap से असली 2D Grid की जगह लेने की उम्मीद
gapछोड़कर बच्चों के मार्जिन से हमेशा लड़ना- बुनियादी ट्रैक सहज होने से पहले नामित क्षेत्रों में कूदना
- जहाँ Grid बेहतर बैठे, वहाँ पूरा पेज शेल float से बनाना
सारांश
- CSS Grid द्वि-आयामी है: पंक्ति और कॉलम साथ
display: gridबच्चों को ग्रिड आइटम बनाता हैgrid-template-columns(और बाद में पंक्तियाँ) ट्रैक तय करते हैंgapऔरfrगटर और खाली जगह शांत रखते हैं- गहरे कंटेनर, आइटम, क्षेत्र और रिस्पॉन्सिव Grid पाठ आगे आते हैं
🧠 अपने ज्ञान की परीक्षा करें
अपने ज्ञान की परीक्षा करें
इस इंटरैक्टिव क्विज़ के साथ अपनी चुनौती लें और देखें कि आप विषय को कितनी अच्छी तरह समझते हैं
📝 निर्देश
- हर प्रश्न को ध्यान से पढ़ें
- हर प्रश्न के लिए सबसे अच्छा उत्तर चुनें
- आप जितनी बार चाहें क्विज़ दोबारा दे सकते हैं
- आपकी प्रगति शीर्ष पर दिखाई जाएगी