Grid में अंतराल, औचित्य और संरेखण
gap-x-* और gap-y-* से grid सेल के बीच अंतराल जोड़ें और justify-items-* तथा place-items-* से grid क्षेत्रों के भीतर आइटम संरेखित करें।
Grid में अंतराल, औचित्य और संरेखण, CoddyKit पर Tailwind CSS Academy का एक निःशुल्क पाठ है। यह 4 में से 4वाँ पाठ है। आप नीचे पूरा पाठ निःशुल्क पढ़ सकते हैं—फिर अंतर्निहित कोड संपादक और 24/7 एआई ट्यूटर के साथ ब्राउज़र में इसका व्यावहारिक अभ्यास कर सकते हैं। यह Tailwind CSS Academy सीखने के मार्ग का हिस्सा है और आपकी प्रगति वेब तथा CoddyKit ऐप पर सिंक होती रहती है। Tailwind CSS Academy पाठ्यक्रम में कुल 4 पाठ शामिल हैं।
ग्रिड कक्षों के बीच अंतराल
ग्रिड के स्तंभ और पंक्तियाँ परिभाषित करने के बाद अगला चरण कक्षों के बीच की जगह को नियंत्रित करना है। Tailwind की gap-* उपयोगिता सीधे CSS के gap संक्षिप्त रूप से जुड़ी होती है, जो एक साथ पंक्ति और स्तंभ दोनों के बीच का अंतर निर्धारित करता है। एक अकेला gap-4 (16px) वर्ग सभी दिशाओं में एकसमान अंतर देता है और किसी कस्टम CSS के बिना आपके लेआउट को संतुलित रखता है।
<!-- Uniform gap in all directions -->
<div class="grid grid-cols-3 gap-4">
<div class="bg-blue-100 p-4 rounded">A</div>
<div class="bg-blue-100 p-4 rounded">B</div>
<div class="bg-blue-100 p-4 rounded">C</div>
<div class="bg-blue-100 p-4 rounded">D</div>
<div class="bg-blue-100 p-4 rounded">E</div>
<div class="bg-blue-100 p-4 rounded">F</div>
</div>gap-x-* और gap-y-* उपयोगिताएँ
जब आपको स्तंभों और पंक्तियों के बीच अलग-अलग अंतर चाहिए, तो क्षैतिज अंतर के लिए gap-x-* और ऊर्ध्वाधर अंतर के लिए gap-y-* का उपयोग करें। उदाहरण के लिए, gap-x-8 gap-y-4 स्तंभों के बीच अधिक क्षैतिज जगह और पंक्तियों के बीच कम ऊर्ध्वाधर जगह देता है। इससे आप दोनों दिशाओं में अपने ग्रिड की दृश्य लय को स्वतंत्र रूप से सूक्ष्म रूप से समायोजित कर सकते हैं।
<!-- Wide horizontal gap, tight vertical gap -->
<div class="grid grid-cols-3 gap-x-10 gap-y-2">
<div class="bg-green-100 p-3 rounded">A</div>
<div class="bg-green-100 p-3 rounded">B</div>
<div class="bg-green-100 p-3 rounded">C</div>
<div class="bg-green-100 p-3 rounded">D</div>
<div class="bg-green-100 p-3 rounded">E</div>
<div class="bg-green-100 p-3 rounded">F</div>
</div>आइटमों को उचित ठहराना — कक्षों का क्षैतिज संरेखण
justify-items-* यह नियंत्रित करता है कि ग्रिड कक्ष के भीतर आइटम क्षैतिज रूप से कैसे संरेखित हों। इसके चार मान हैं: justify-items-start, justify-items-center, justify-items-end और justify-items-stretch (डिफ़ॉल्ट)। आइटमों को खींचकर फैलाने पर वे अपने कक्ष की पूरी चौड़ाई भर देते हैं। आइकन-आधारित ग्रिड में केंद्र-संरेखण आम है, जहाँ आप हर आइकन को उसके स्तंभ के बीच में रखना चाहते हैं।
<!-- Icons centered within each grid cell -->
<div class="grid grid-cols-4 gap-6 justify-items-center">
<div class="text-4xl">📷</div>
<div class="text-4xl">🎵</div>
<div class="text-4xl">📚</div>
<div class="text-4xl">🎮</div>
</div>आइटमों को संरेखित करना — कक्षों का ऊर्ध्वाधर संरेखण
ग्रिड संदर्भ में align-items-* यह नियंत्रित करता है कि आइटम अपनी पंक्ति ट्रैक के भीतर लंबवत कैसे संरेखित हों। items-start आइटमों को पंक्ति के शीर्ष पर रखता है, items-center उन्हें लंबवत बीच में रखता है और items-end उन्हें नीचे की ओर ले जाता है। डिफ़ॉल्ट items-stretch है, जिससे आइटम अपनी पंक्ति की पूरी ऊँचाई भरते हैं। यह Flexbox के align-items से अलग है, लेकिन Tailwind में समान वर्ग नामों का उपयोग करता है।
<!-- Grid row with mixed-height cells, items aligned to center -->
<div class="grid grid-cols-3 gap-4 items-center h-32">
<div class="bg-purple-200 p-2 rounded h-8">Short</div>
<div class="bg-purple-200 p-6 rounded">Tall</div>
<div class="bg-purple-200 p-2 rounded h-12">Medium</div>
</div>दोनों अक्षों के लिए एक साथ place-items
place-items-* एक संक्षिप्त उपयोगिता है, जो align-items और justify-items दोनों को एक साथ निर्धारित करती है। place-items-center हर ग्रिड आइटम को उसके कक्ष में क्षैतिज और ऊर्ध्वाधर, दोनों दिशाओं में बिल्कुल केंद्रित करता है — ऐसा काम जिसके लिए पहले दो अलग-अलग CSS गुण लिखने पड़ते थे। यह आइकन ग्रिड, अवतार प्रदर्शन और ऐसे किसी भी ग्रिड के लिए आदर्श है जहाँ आइटमों को अपने कक्षों के बीच में रखना हो।
<!-- Avatar cards, each item perfectly centered in its cell -->
<div class="grid grid-cols-4 gap-4 place-items-center">
<div class="w-16 h-16 bg-red-400 rounded-full flex items-center justify-center text-white font-bold">JD</div>
<div class="w-16 h-16 bg-blue-400 rounded-full flex items-center justify-center text-white font-bold">AB</div>
<div class="w-16 h-16 bg-green-400 rounded-full flex items-center justify-center text-white font-bold">CK</div>
<div class="w-16 h-16 bg-yellow-400 rounded-full flex items-center justify-center text-white font-bold">MR</div>
</div>सामग्री को उचित ठहराना — पूरे ग्रिड का संरेखण
जब आपके ग्रिड स्तंभों की कुल चौड़ाई कंटेनर की चौड़ाई से कम हो, तो justify-content-* पूरे ग्रिड ब्लॉक को कंटेनर के भीतर क्षैतिज रूप से रखता है। justify-center स्तंभ समूह को बीच में रखता है, justify-between स्तंभों को दोनों किनारों तक फैला देता है और justify-around हर स्तंभ के चारों ओर समान जगह जोड़ता है। यह justify-items से अलग है, जो कक्षों के भीतर आइटमों को संरेखित करता है।
<!-- Fixed-width columns centered within a wide container -->
<div class="grid gap-4 justify-center" style="grid-template-columns: repeat(3, 100px)">
<div class="bg-orange-100 p-4 rounded">A</div>
<div class="bg-orange-100 p-4 rounded">B</div>
<div class="bg-orange-100 p-4 rounded">C</div>
</div>सामग्री को संरेखित करना — ग्रिड की ऊर्ध्वाधर स्थिति
align-content-* यह नियंत्रित करता है कि पंक्तियों की कुल ऊँचाई कंटेनर से कम होने पर ग्रिड पंक्तियों का पूरा समूह लंबवत कहाँ रखा जाए। content-center सभी पंक्तियों को लंबवत बीच में रखता है, content-between उन्हें ऊपर और नीचे तक फैला देता है और content-evenly उनके बीच समान जगह बाँटता है। यह डैशबोर्ड विजेट जैसे निश्चित ऊँचाई वाले कंटेनरों में विशेष रूप से उपयोगी है।
<!-- 2 rows centered in a tall container -->
<div class="grid grid-cols-2 gap-4 h-64 content-center">
<div class="bg-teal-100 p-4 rounded">Row 1, A</div>
<div class="bg-teal-100 p-4 rounded">Row 1, B</div>
<div class="bg-teal-100 p-4 rounded">Row 2, A</div>
<div class="bg-teal-100 p-4 rounded">Row 2, B</div>
</div>place-content — ग्रिड-स्तरीय संक्षिप्त रूप
place-content-* वह संक्षिप्त रूप है जो align-content और justify-content को एक ही उपयोगिता में मिलाता है। place-content-center पूरे ग्रिड को उसके कंटेनर में क्षैतिज और ऊर्ध्वाधर, दोनों दिशाओं में केंद्रित करता है। यह पूर्ण-स्क्रीन केंद्रित ग्रिड, लोड होने वाली स्क्रीन या ऐसे किसी भी अवसर के लिए उपयोगी है जब आप ग्रिड ब्लॉक को बड़े क्षेत्र के ठीक बीच में रखना चाहते हों।
<!-- Grid block centered inside the viewport -->
<div class="grid h-screen place-content-center gap-6" style="grid-template-columns: repeat(2, 200px)">
<div class="bg-sky-200 p-8 rounded text-center">Option A</div>
<div class="bg-sky-200 p-8 rounded text-center">Option B</div>
</div>justify-self और align-self से प्रत्येक आइटम के लिए ओवरराइड
कभी-कभी आपको ग्रिड के बाकी हिस्से से अलग व्यवहार करने वाले किसी एक विशेष आइटम की आवश्यकता होती है। justify-self-* किसी एक कक्ष के लिए justify-items को ओवरराइड करता है और align-self-* align-items को ओवरराइड करता है। उदाहरण के लिए, आप justify-self-end का उपयोग करके किसी एक क्रिया बटन को उसके कक्ष के भीतर दाईं ओर भेज सकते हैं, जबकि बाकी सभी कक्ष बाईं ओर संरेखित रहें।
<!-- Most items default, but last button right-aligned -->
<div class="grid grid-cols-3 gap-4 items-start">
<div class="bg-gray-100 p-4">Content A</div>
<div class="bg-gray-100 p-4">Content B</div>
<button class="justify-self-end bg-blue-500 text-white px-4 py-2 rounded self-center">
Action
</button>
</div>place-self — प्रत्येक आइटम का संक्षिप्त रूप
place-self-* प्रत्येक आइटम के लिए align-self और justify-self को मिलाने वाला संक्षिप्त रूप है। सबसे शक्तिशाली मान place-self-center है, जो मूल ग्रिड में निर्दिष्ट व्यवस्था की परवाह किए बिना किसी एक आइटम को उसके कक्ष में क्षैतिज और ऊर्ध्वाधर, दोनों दिशाओं में केंद्रित करता है। यह निश्चित आकार वाले ग्रिड कक्ष में आइकन या लोडिंग संकेतक को केंद्रित करने के लिए उपयोगी है।
<!-- One loading spinner centered in its grid cell -->
<div class="grid grid-cols-3 gap-4 h-32">
<div class="bg-gray-100 p-4 rounded">Content</div>
<div class="bg-gray-100 rounded place-self-center">
<div class="w-8 h-8 border-4 border-blue-500 border-t-transparent rounded-full animate-spin"></div>
</div>
<div class="bg-gray-100 p-4 rounded">Content</div>
</div>ग्रिड संरेखण का संपूर्ण संदर्भ
Tailwind में ग्रिड संरेखण को समझने का एक त्वरित तरीका: justify-items / align-items — कक्षों के भीतर संतानों को संरेखित करते हैं (आइटम स्तर)। justify-content / align-content — कंटेनर के भीतर पूरे ग्रिड ब्लॉक की स्थिति तय करते हैं (ट्रैक स्तर)। justify-self / align-self — किसी एक आइटम के संरेखण को ओवरराइड करते हैं। दोनों अक्षों को एक साथ संभालने के लिए इनके साथ place-* के संक्षिप्त वैरिएंट का उपयोग करें।
<!-- Summary: centered grid, stretched items, one overridden -->
<div class="grid grid-cols-3 gap-6 place-content-center place-items-center h-48">
<div class="w-20 h-20 bg-indigo-200 rounded flex items-center justify-center">A</div>
<div class="w-20 h-20 bg-indigo-300 rounded flex items-center justify-center">B</div>
<!-- Override: this item aligns to end instead of center -->
<div class="w-20 h-20 bg-indigo-400 rounded flex items-center justify-center self-end">
C
</div>
</div>त्वरित जाँच
इस पाठ के Tailwind CSS महारत संबंधी विचारों की अपनी समझ जाँचें।
पाठ का पुनरावलोकन
इस पाठ में आपने सीखा: gap-x-* और gap-y-* क्षैतिज और ऊर्ध्वाधर अंतर को स्वतंत्र रूप से नियंत्रित करते हैं, justify-items और align-items प्रत्येक ग्रिड कक्ष के भीतर सामग्री की स्थिति तय करते हैं, और justify-content तथा align-content पूरे ग्रिड को उसके कंटेनर के भीतर रखते हैं। आगे हम ऐसे आकार निर्धारण वाली उपयोगिताओं पर जाएँगे, जो तत्वों की चौड़ाई और ऊँचाई नियंत्रित करती हैं।
एआई शिक्षक के साथ HTML सीखें — निःशुल्क
अपने ब्राउज़र में वास्तविक कोड लिखें और चलाएँ, चौबीसों घंटे एआई शिक्षक से तुरंत सहायता पाएँ, और वेब या ऐप पर वहीं से शुरू करें जहाँ आपने छोड़ा था।
- पाठ्यक्रम
- 30
- पाठ
- 120
अक्सर पूछे जाने वाले प्रश्न
क्या “Grid में अंतराल, औचित्य और संरेखण” पाठ निःशुल्क है?
हाँ—“Grid में अंतराल, औचित्य और संरेखण” का पूरा पाठ यहाँ वेब पर निःशुल्क पढ़ा जा सकता है। इंटरैक्टिव अभ्यास (अंतर्निहित कोड संपादक और 24/7 एआई ट्यूटर) करने और Tailwind CSS Academy पाठ्यक्रम का बाकी हिस्सा अनलॉक करने के लिए CoddyKit PRO लें। Tailwind CSS Academy पाठ्यक्रम में कुल 4 पाठ शामिल हैं।
“Grid में अंतराल, औचित्य और संरेखण” में मैं क्या सीखूँगा?
gap-x-* और gap-y-* से grid सेल के बीच अंतराल जोड़ें और justify-items-* तथा place-items-* से grid क्षेत्रों के भीतर आइटम संरेखित करें। आप ब्राउज़र में सीधे चलाए जाने वाले व्यावहारिक कोड के साथ Tailwind CSS Academy का अभ्यास करते हैं, और पाठ पूरा करते समय 24/7 एआई ट्यूटर आपके प्रश्नों के उत्तर देता है।
क्या Tailwind CSS Academy शुरू करने के लिए मुझे किसी अनुभव की आवश्यकता है?
पहले के अनुभव की आवश्यकता नहीं है। CoddyKit पर Tailwind CSS Academy शुरुआती से लेकर उन्नत शिक्षार्थियों तक सभी के लिए व्यवस्थित किया गया है, इसलिए आप यहीं से या शुरुआत से सीखना शुरू कर सकते हैं और अपनी गति से आगे बढ़ सकते हैं। यह 4 में से 4वाँ पाठ है।
“Grid में अंतराल, औचित्य और संरेखण” पाठ पूरा करने में कितना समय लगता है?
CoddyKit का अधिकांश पाठ लगभग 5–10 मिनट में पूरा हो जाता है। हर पाठ छोटा और संवादात्मक है, इसलिए आप लगातार प्रगति करते हैं और वेब या ऐप पर वहीं से सीखना जारी रख सकते हैं जहाँ आपने छोड़ा था।
क्या मैं इस Tailwind CSS Academy पाठ में कोड लिख और चला सकता हूँ?
हाँ। हर Tailwind CSS Academy पाठ में एक अंतर्निर्मित कोड संपादक शामिल है, जिससे आप सीधे अपने ब्राउज़र में वास्तविक कोड लिख और चला सकते हैं और तुरंत एआई प्रतिक्रिया पा सकते हैं—स्थानीय सेटअप की आवश्यकता नहीं है।
इस पाठ्यक्रम के सभी पाठ
- Grid कॉलम परिभाषित करना
- कॉलम और पंक्ति विस्तार
- Grid पंक्तियाँ और स्वचालित स्थान-निर्धारण
- Grid में अंतराल, औचित्य और संरेखण