कॉलम और पंक्ति विस्तार
जटिल grid व्यवस्थाओं के लिए col-span-* और row-span-* यूटिलिटी से आइटम को कई कॉलम या पंक्तियों तक फैलाएँ।
कॉलम और पंक्ति विस्तार, CoddyKit पर Tailwind CSS Academy का एक निःशुल्क पाठ है। यह 4 में से 2वाँ पाठ है। आप नीचे पूरा पाठ निःशुल्क पढ़ सकते हैं—फिर अंतर्निहित कोड संपादक और 24/7 एआई ट्यूटर के साथ ब्राउज़र में इसका व्यावहारिक अभ्यास कर सकते हैं। यह Tailwind CSS Academy सीखने के मार्ग का हिस्सा है और आपकी प्रगति वेब तथा CoddyKit ऐप पर सिंक होती रहती है। Tailwind CSS Academy पाठ्यक्रम में कुल 4 पाठ शामिल हैं।
ग्रिड में फैलाव क्या है
डिफ़ॉल्ट रूप से, CSS Grid कंटेनर का प्रत्येक चाइल्ड ठीक एक कॉलम और एक पंक्ति लेता है। फैलाव किसी एक ग्रिड आइटम को कई कॉलम या पंक्तियों में फैलाने देता है, जिससे असममित, पत्रिका-शैली के विन्यास बनाए जा सकते हैं। टेलविंड col-span-* और row-span-* यूटिलिटी देता है, जो CSS में सीधे grid-column: span N और grid-row: span N में बदलती हैं।
<!-- Item spans 2 columns out of a 4-column grid -->
<div class="grid grid-cols-4 gap-4">
<div class="col-span-2 bg-blue-200 p-4">Wide item</div>
<div class="bg-blue-100 p-4">Normal</div>
<div class="bg-blue-100 p-4">Normal</div>
</div>col-span-* यूटिलिटी
टेलविंड में col-span-1 से col-span-12 तक के विकल्पों के साथ col-span-full भी मिलता है, जो सभी उपलब्ध कॉलम में फैलता है। इन यूटिलिटी को कंटेनर पर नहीं, बल्कि ग्रिड चाइल्ड पर लागू करें। उदाहरण के लिए, 12-कॉलम ग्रिड में col-span-8 मुख्य सामग्री क्षेत्र देता है और बचे हुए 4 कॉलम साइडबार के लिए रखे जा सकते हैं — यह दो-भाग वाले विन्यास का सामान्य पैटर्न है।
<!-- Classic 8 + 4 main/sidebar layout -->
<div class="grid grid-cols-12 gap-6">
<main class="col-span-8 bg-white p-6 rounded shadow">
Main Content
</main>
<aside class="col-span-4 bg-gray-100 p-6 rounded">
Sidebar
</aside>
</div>पूर्ण-चौड़ाई वाले आइटम के लिए col-span-full
col-span-full क्लास किसी तत्व को अपने ग्रिड के हर कॉलम में फैला देती है, जो grid-column: 1 / -1 के समान है। यह पूर्ण-चौड़ाई वाले बैनर, अनुभाग शीर्षक या विभाजक के लिए बहुत उपयोगी है, जिन्हें ग्रिड परिभाषा बदले बिना कार्ड ग्रिड से बाहर तक फैलना हो। वर्तमान कॉलम संख्या बदलने पर भी यह हमेशा उतने ही कॉलम में फैलती है।
<!-- Full-width banner inside a 3-column card grid -->
<div class="grid grid-cols-3 gap-4">
<div class="col-span-full bg-indigo-500 text-white p-4 text-center rounded">
Featured Announcement
</div>
<div class="bg-gray-100 p-4">Card A</div>
<div class="bg-gray-100 p-4">Card B</div>
<div class="bg-gray-100 p-4">Card C</div>
</div>row-span-* यूटिलिटी
row-span-* कॉलम फैलाव की तरह ही काम करता है, लेकिन ऊर्ध्वाधर दिशा में। row-span-2 वाला तत्व दो पंक्ति ट्रैक लेता है, इसलिए वह अपने पड़ोसी तत्वों से ऊँचा हो जाता है। यह बेंटो-शैली के ग्रिड में फीचर छवियों या प्रमुख कार्ड के लिए उपयुक्त है, जहाँ एक प्रमुख आइटम कई छोटे आइटम के साथ रखा जाता है।
<!-- Bento grid: one tall card beside two shorter ones -->
<div class="grid grid-cols-2 grid-rows-2 gap-4 h-64">
<div class="row-span-2 bg-purple-300 p-4 rounded">Tall card</div>
<div class="bg-purple-100 p-4 rounded">Short A</div>
<div class="bg-purple-100 p-4 rounded">Short B</div>
</div>col-span और row-span को संयोजित करना
बड़ा फीचर सेल बनाने के लिए आप एक ही तत्व पर col-span-* और row-span-* को संयोजित कर सकते हैं। यही बेंटो-बॉक्स और मोज़ेक विन्यास का आधार है। उदाहरण के लिए, col-span-2 row-span-2 तक फैला हुआ हीरो छवि सेल 2×2 क्षेत्र भरता है और आसपास के सेल अपने-आप उसके चारों ओर व्यवस्थित हो जाते हैं।
<!-- 3x3 bento grid with a featured 2x2 cell -->
<div class="grid grid-cols-3 grid-rows-3 gap-3 h-72">
<div class="col-span-2 row-span-2 bg-sky-400 text-white p-4 rounded">
Featured
</div>
<div class="bg-sky-100 p-3 rounded">A</div>
<div class="bg-sky-100 p-3 rounded">B</div>
<div class="bg-sky-100 p-3 rounded">C</div>
<div class="col-span-2 bg-sky-200 p-3 rounded">Wide bottom</div>
</div>स्पष्ट कॉलम स्थिति निर्धारण
फैलाव के अलावा, आप col-start-* और col-end-* यूटिलिटी से यह भी सटीक रूप से नियंत्रित कर सकते हैं कि कोई आइटम कहाँ से शुरू हो। col-start-2 आइटम के बाएँ किनारे को दूसरी ग्रिड रेखा पर रखता है और col-end-5 उसे पाँचवीं रेखा पर समाप्त करता है। यह सूक्ष्म नियंत्रण आपको विन्यास में जानबूझकर कॉलम छोड़कर खाली जगह बनाने देता है।
<!-- Item starts at column 2, ends at column 5 (spans 3) -->
<div class="grid grid-cols-6 gap-4">
<div class="col-start-2 col-end-5 bg-rose-200 p-4 rounded">
Starts at line 2, ends at line 5
</div>
<div class="bg-rose-100 p-4 rounded">Normal</div>
</div>row-start-* और row-end-* स्थिति निर्धारण
इसी तरह, row-start-* और row-end-* ऊर्ध्वाधर स्थिति को स्पष्ट रूप से नियंत्रित करते हैं। जब आपको ऑटो-प्लेसमेंट को बदलकर कुछ आइटम को सटीक ग्रिड क्षेत्रों में रखना हो, तब ये सबसे उपयोगी होते हैं। col-start और col-end के साथ मिलकर ये तत्वों को किसी विशिष्ट ग्रिड क्षेत्र में प्रभावी रूप से स्थिर कर देते हैं।
<!-- Item pinned to row 2, columns 2-3 -->
<div class="grid grid-cols-3 grid-rows-3 gap-3 h-48">
<div class="bg-gray-200 p-3 rounded">Auto-placed</div>
<div class="bg-gray-200 p-3 rounded">Auto-placed</div>
<div class="bg-gray-200 p-3 rounded">Auto-placed</div>
<div class="col-start-2 col-span-2 row-start-2 bg-emerald-300 p-3 rounded">
Explicit position
</div>
</div>अनुक्रियाशील फैलाव
ऐसे विन्यास बनाने के लिए अनुक्रियाशील प्रीफ़िक्स को span यूटिलिटी के साथ मिलाएँ, जो अलग-अलग ब्रेकपॉइंट पर बहुत बदलते हैं। कोई आइटम पढ़ने योग्य बने रहने के लिए मोबाइल पर सभी कॉलम में फैल सकता है और डेस्कटॉप पर संकीर्ण साइडबार में बदल सकता है। col-span-full md:col-span-4 lg:col-span-3 पैटर्न ठीक यही करता है: मोबाइल पर पूर्ण चौड़ाई और बड़ी स्क्रीन पर कम चौड़ाई।
<!-- Card spans full on mobile, one-third on large screens -->
<div class="grid grid-cols-12 gap-4">
<div class="col-span-12 lg:col-span-4 bg-amber-100 p-4 rounded">
Sidebar/card
</div>
<div class="col-span-12 lg:col-span-8 bg-amber-50 p-4 rounded">
Main content
</div>
</div>Auto के साथ ओवरफ़्लो से बचना
यदि किसी चाइल्ड में col-start-* और col-span-* दोनों हों और वे ग्रिड की सीमाओं से टकराएँ, तो ब्राउज़र उसे अगली पंक्ति में भेज देता है। ब्राउज़र को आरंभिक स्थिति चुनने देने के लिए col-auto का उपयोग करें — यह विरासत में मिली स्पष्ट स्थिति को फिर से स्वचालित कर देता है और तब उपयोगी है जब आप केवल फैलाव नियंत्रित करना चाहते हों, आरंभिक स्थिति नहीं।
<!-- col-auto resets to automatic placement -->
<div class="grid grid-cols-4 gap-3">
<div class="col-span-2 bg-violet-200 p-3">Spans 2</div>
<div class="col-auto bg-violet-100 p-3">Auto-placed</div>
<div class="col-auto bg-violet-100 p-3">Auto-placed</div>
<div class="col-span-3 bg-violet-300 p-3">Spans 3</div>
</div>वास्तविक ब्लॉग विन्यास
क्लासिक ब्लॉग विन्यास में मुख्य पोस्ट के लिए चौड़ा क्षेत्र और साइडबार के लिए संकीर्ण क्षेत्र होता है। 12-कॉलम के आधार ग्रिड में लेख के लिए col-span-8 और साइडबार के लिए col-span-4 उपयोग करने पर 2:1 अनुपात मिलता है। पूर्ण-चौड़ाई वाली फ़ुटर पंक्ति के लिए col-span-12 जोड़ने से संरचना पूरी हो जाती है — वह भी किसी कस्टम CSS के बिना।
<div class="grid grid-cols-12 gap-6 p-6">
<header class="col-span-12 bg-slate-800 text-white p-4 rounded">
Blog Header
</header>
<article class="col-span-12 md:col-span-8 bg-white p-6 rounded shadow">
Article content here...
</article>
<aside class="col-span-12 md:col-span-4 bg-gray-50 p-4 rounded">
Widgets
</aside>
<footer class="col-span-12 bg-slate-700 text-white p-4 rounded text-center">
Footer
</footer>
</div>फैलाव यूटिलिटी को संयोजित करना
यहाँ एक पत्रिका-शैली का कार्ड ग्रिड है, जो कॉलम और पंक्ति फैलाव को संयोजित करता है। एक बड़ा फीचर कार्ड col-span-2 row-span-2 लेता है, दो ऊँचे साइड कार्ड प्रत्येक row-span-1 का उपयोग करते हैं और एक पूर्ण-चौड़ाई वाला बैनर col-span-full का। इन यूटिलिटी को साथ मिलाने पर आपको ऐसे संपादकीय विन्यास मिलते हैं, जिनके लिए पहले नामित ग्रिड क्षेत्रों वाला जटिल CSS आवश्यक होता था।
<div class="grid grid-cols-3 gap-4">
<div class="col-span-2 row-span-2 bg-blue-500 text-white p-6 rounded">
Feature Story
</div>
<div class="bg-blue-200 p-4 rounded">Short A</div>
<div class="bg-blue-200 p-4 rounded">Short B</div>
<div class="col-span-full bg-blue-100 p-4 rounded text-center">
Full-Width Banner
</div>
</div>त्वरित जाँच
इस पाठ में टेलविंड CSS महारत की अवधारणाओं के बारे में अपनी समझ का परीक्षण करें।
पाठ का पुनरावलोकन
इस पाठ में आपने सीखा: col-span-* और row-span-* ग्रिड आइटम को कई ट्रैक में फैलाते हैं, col-start-* और col-end-* सटीक स्पष्ट स्थिति निर्धारण सक्षम करते हैं, और col-span-full कॉलमों की संख्या चाहे जो हो, हमेशा हर कॉलम में फैलता है। आगे हम सीखेंगे कि स्पष्ट ग्रिड पंक्तियाँ कैसे परिभाषित करें और ऑटो-प्लेसमेंट व्यवहार को कैसे नियंत्रित करें।
एआई शिक्षक के साथ HTML सीखें — निःशुल्क
अपने ब्राउज़र में वास्तविक कोड लिखें और चलाएँ, चौबीसों घंटे एआई शिक्षक से तुरंत सहायता पाएँ, और वेब या ऐप पर वहीं से शुरू करें जहाँ आपने छोड़ा था।
- पाठ्यक्रम
- 30
- पाठ
- 120
अक्सर पूछे जाने वाले प्रश्न
क्या “कॉलम और पंक्ति विस्तार” पाठ निःशुल्क है?
हाँ—“कॉलम और पंक्ति विस्तार” का पूरा पाठ यहाँ वेब पर निःशुल्क पढ़ा जा सकता है। इंटरैक्टिव अभ्यास (अंतर्निहित कोड संपादक और 24/7 एआई ट्यूटर) करने और Tailwind CSS Academy पाठ्यक्रम का बाकी हिस्सा अनलॉक करने के लिए CoddyKit PRO लें। Tailwind CSS Academy पाठ्यक्रम में कुल 4 पाठ शामिल हैं।
“कॉलम और पंक्ति विस्तार” में मैं क्या सीखूँगा?
जटिल grid व्यवस्थाओं के लिए col-span-* और row-span-* यूटिलिटी से आइटम को कई कॉलम या पंक्तियों तक फैलाएँ। आप ब्राउज़र में सीधे चलाए जाने वाले व्यावहारिक कोड के साथ Tailwind CSS Academy का अभ्यास करते हैं, और पाठ पूरा करते समय 24/7 एआई ट्यूटर आपके प्रश्नों के उत्तर देता है।
क्या Tailwind CSS Academy शुरू करने के लिए मुझे किसी अनुभव की आवश्यकता है?
पहले के अनुभव की आवश्यकता नहीं है। CoddyKit पर Tailwind CSS Academy शुरुआती से लेकर उन्नत शिक्षार्थियों तक सभी के लिए व्यवस्थित किया गया है, इसलिए आप यहीं से या शुरुआत से सीखना शुरू कर सकते हैं और अपनी गति से आगे बढ़ सकते हैं। यह 4 में से 2वाँ पाठ है।
“कॉलम और पंक्ति विस्तार” पाठ पूरा करने में कितना समय लगता है?
CoddyKit का अधिकांश पाठ लगभग 5–10 मिनट में पूरा हो जाता है। हर पाठ छोटा और संवादात्मक है, इसलिए आप लगातार प्रगति करते हैं और वेब या ऐप पर वहीं से सीखना जारी रख सकते हैं जहाँ आपने छोड़ा था।
क्या मैं इस Tailwind CSS Academy पाठ में कोड लिख और चला सकता हूँ?
हाँ। हर Tailwind CSS Academy पाठ में एक अंतर्निर्मित कोड संपादक शामिल है, जिससे आप सीधे अपने ब्राउज़र में वास्तविक कोड लिख और चला सकते हैं और तुरंत एआई प्रतिक्रिया पा सकते हैं—स्थानीय सेटअप की आवश्यकता नहीं है।
इस पाठ्यक्रम के सभी पाठ
- Grid कॉलम परिभाषित करना
- कॉलम और पंक्ति विस्तार
- Grid पंक्तियाँ और स्वचालित स्थान-निर्धारण
- Grid में अंतराल, औचित्य और संरेखण