CSS Grid कंटेनर
Grid परिचय ने माता-पिता को जाल बना दिया। यह पाठ कंटेनर पर रहता है: tracks तय करें, gap लगाएँ, कोशिकाओं में आइटम संरेखित करें, और खाली जगह बचे तो पूरी ग्रिड पैक करें। आइटम span और नामित areas Grid Items और Grid Areas का इंतज़ार करते हैं।
grid कंटेनर टूलकिट
📊 grid कंटेनर एक नज़र में
| गुण | रोज़ का काम |
|---|---|
grid-template-columns |
कॉलम track आकार तय करता है |
grid-template-rows |
पंक्ति track आकार तय करता है |
gap |
tracks के बीच गटर |
justify-items / align-items |
प्रत्येक आइटम को उसकी कोशिका में संरेखित (inline / block अक्ष) |
justify-content / align-content |
जब ग्रिड कंटेनर से छोटी हो तो पूरी ग्रिड रखता है |
grid-auto-flow |
ऑटो-प्लेसमेंट पैकिंग क्रम नियंत्रित करता है (row या column) |
पहले tracks बनाएँ। फिर तय करें कोशिकाएँ सामग्री कैसे संरेखित करें, और उसके बाद ही पूरी ग्रिड के आसपास बची जगह कैसे व्यवहार करे।
टेम्पलेट tracks — कॉलम और पंक्तियाँ
grid-template-columns और grid-template-rows जाल का स्केच बनाते हैं। रोज़ के बोर्ड के लिए fr, लंबाई और repeat() मिलाएँ।
.board {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: auto 1fr auto;
min-height: 16rem;
}
gap — गटर ईमानदार रखें
gap (या row-gap / column-gap) हर बच्चे पर margin हैक के बिना tracks बीच दूरी देता है।
.board {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1rem 1.25rem;
}
justify-items और align-items — कोशिका के अंदर
ये प्रत्येक आइटम को उसकी कोशिका में संरेखित करते हैं। justify-items inline अक्ष पर; align-items block अक्ष पर। इन्हें कंटेंट पैकिंग से न मिलाएँ।
.board {
display: grid;
grid-template-columns: repeat(2, 8rem);
justify-items: center;
align-items: center;
gap: 0.75rem;
}
justify-content और align-content — ग्रिड पैक करें
जब tracks कंटेनर से छोटे हों, content गुण पूरी ग्रिड को सरकाते या फैलाते हैं। आइकन बोर्ड के लिए उपयोगी जो हमेशा न खिंचें।
.board {
display: grid;
grid-template-columns: repeat(3, 6rem);
justify-content: space-between;
align-content: start;
gap: 0.5rem;
min-height: 12rem;
}
शांत grid कंटेनर आदत
पहले टेम्पलेट कॉलम और पंक्तियाँ, फिर gap, फिर कोशिका में आइटम संरेखण, फिर खाली जगह हो तो content पैकिंग। ऑटो-प्लेसमेंट क्रम मायने रखे तो grid-auto-flow देखें। span, लाइन नंबर और नामित areas अगले Grid पाठों के लिए छोड़ें।
.shell {
display: grid;
grid-template-columns: 2fr 1fr;
grid-template-rows: auto 1fr;
gap: 1.25rem;
justify-items: stretch;
align-items: stretch;
}
स्वयं आज़माएँ
- तीन
1frकॉलम औरauto 1fr autoपंक्तियों वाला बोर्ड बनाएँ। gap: 1remजोड़ें।justify-itemsऔरalign-itemsसे कोशिका सामग्री केंद्रित करें।- स्थिर track वाले बोर्ड को
justify-content: space-betweenसे पैक करें। - एक गुण लिखें जिसे Grid Items या Grid Areas के लिए रखेंगे।
आम गलतियाँ
justify-items(कोशिकाओं में) कोjustify-content(पूरी ग्रिड) से मिलाना- कंटेनर पर बहुत जल्दी आइटम
spanया area नाम लगाना - सिर्फ कॉलम तय कर पंक्ति ऊँचाइयों पर हैरान होना
- Flex की
growआदतें grid कंटेनर पर लाना - इस पाठ को पूरा Areas मॉड्यूल समझना
सार
- grid कंटेनर गुण tracks, गटर और संरेखण तय करते हैं
grid-template-columns/rowsजाल स्केच करते हैंjustify-items/align-itemsकोशिका में सामग्री संरेखित करते हैंjustify-content/align-contentखाली जगह में ग्रिड पैक करते हैं- आइटम span और नामित areas बाद के Grid पाठों में आते हैं
🧠 अपने ज्ञान की परीक्षा करें
अपने ज्ञान की परीक्षा करें
इस इंटरैक्टिव क्विज़ के साथ अपनी चुनौती लें और देखें कि आप विषय को कितनी अच्छी तरह समझते हैं
📝 निर्देश
- हर प्रश्न को ध्यान से पढ़ें
- हर प्रश्न के लिए सबसे अच्छा उत्तर चुनें
- आप जितनी बार चाहें क्विज़ दोबारा दे सकते हैं
- आपकी प्रगति शीर्ष पर दिखाई जाएगी