CSS Academy · पाठ

Implicit Grid और Grid-Auto-Flow

समझिए कि CSS Grid implicit row और column से explicit track से आगे के item को कैसे संभालता है।

पाठ 3, कुल 4 में से13 चरण

Implicit Grid और Grid-Auto-Flow, CoddyKit पर CSS Academy का एक निःशुल्क पाठ है। यह 4 में से 3वाँ पाठ है। आप नीचे पूरा पाठ निःशुल्क पढ़ सकते हैं—फिर अंतर्निहित कोड संपादक और 24/7 एआई ट्यूटर के साथ ब्राउज़र में इसका व्यावहारिक अभ्यास कर सकते हैं। यह CSS Academy सीखने के मार्ग का हिस्सा है और आपकी प्रगति वेब तथा CoddyKit ऐप पर सिंक होती रहती है। CSS Academy पाठ्यक्रम में कुल 4 पाठ शामिल हैं।

स्पष्ट बनाम अंतर्निहित ग्रिड

स्पष्ट ग्रिड को grid-template-columns और grid-template-rows से परिभाषित किया जाता है। जब आइटम इन परिभाषित ट्रैक से आगे निकल जाते हैं, तो ब्राउज़र अपने-आप अंतर्निहित ट्रैक बना देता है।

grid-auto-rows

यह अपने-आप बनाए गए पंक्ति ट्रैक का आकार निर्धारित करता है। इसके बिना, अंतर्निहित पंक्तियों का आकार उनकी सामग्री में फिट होने के अनुसार निर्धारित होता है (auto)।

  <div class="gallery">
    <div>1</div><div>2</div><div>3</div><div>4</div>
  </div>

minmax के साथ grid-auto-rows

अंतर्निहित पंक्तियों को कम-से-कम एक निश्चित ऊँचाई का बनाइए, लेकिन उन्हें फैलने योग्य रखिए:

  <div class="feed">
    <div>1</div><div>2</div><div>3</div>
  </div>

grid-auto-columns

जब आइटम स्पष्ट कॉलम सीमा के बाहर रखे जाते हैं, तब यह अंतर्निहित कॉलम ट्रैक के आकार निर्धारित करता है:

  <div class="timeline">
    <div>Event 1</div><div>Event 2</div>
  </div>

grid-auto-flow

यह नियंत्रित करता है कि स्वतः-स्थिति-निर्धारण एल्गोरिदम आइटम को कैसे रखता है:

row (डिफ़ॉल्ट) — पंक्तियों में रखें और आवश्यकता के अनुसार नई पंक्तियाँ जोड़ें
column — कॉलम में रखें और नए कॉलम जोड़ें
row dense — पीछे जाकर खाली जगहों को आक्रामक रूप से भरें
column dense — कॉलम की दिशा में सघन भराई

grid-auto-flow: dense

dense एल्गोरिदम को बड़े विस्तार वाले आइटम से छोड़ी गई खाली जगह भरने का प्रयास करने देता है। इससे आइटम क्रम से बाहर दिखाई दे सकते हैं।

  <div class="masonry">
    <div class="featured">Featured</div><div>2</div><div>3</div><div>4</div>
  </div>

ऑटो-फ़्लो कॉलम पैटर्न

क्षैतिज रूप से स्क्रॉल होने वाली कार्ड पट्टी, जिसमें आवश्यकता के अनुसार कॉलम बढ़ते हैं:

  <div class="strip">
    <div>Card 1</div><div>Card 2</div><div>Card 3</div>
  </div>

गैलरी के लिए सघन पैकिंग

अलग-अलग आकार वाली फ़ोटो गैलरी, जो खाली जगहों को भरती है:

  <div class="gallery">
    <div class="wide">Wide</div>
    <div class="tall">Tall</div>
    <div>3</div><div>4</div>
  </div>

अंतर्निहित ग्रिड और नामित क्षेत्र

नामित क्षेत्र केवल स्पष्ट ग्रिड पर लागू होते हैं। अंतर्निहित ग्रिड में रखे गए आइटम सीधे नामित क्षेत्र की स्थिति का उपयोग नहीं कर सकते — उनके लिए रेखा संख्या या span की स्थिति आवश्यक होती है।

अंतर्निहित ग्रिड को देखना

Chrome DevTools में लेआउट ओवरले स्पष्ट (ठोस) और अंतर्निहित (डैश वाली) दोनों ग्रिड रेखाएँ दिखाता है। इससे आपको समझने में सहायता मिलती है कि स्वतः रखे गए आइटम कहाँ पहुँचते हैं।

प्रति आइटम अंतर्निहित आकार को नियंत्रित करना

अंतर्निहित ग्रिड में कई पंक्तियों तक फैले आइटम का आकार सही ढंग से निर्धारित करने के लिए grid-auto-rows आवश्यक है। इसके बिना, अंतर्निहित पंक्तियों का आकार सामग्री के अनुसार निर्धारित होता है, जिससे लेआउट असमान हो सकते हैं।

त्वरित जाँच

grid-auto-flow: row dense क्या करता है?

इंटरैक्टिव पाठ में इसका उत्तर दें

पुनरावलोकन

अंतर्निहित ग्रिड अपने-आप बनाए गए ट्रैक के साथ स्पष्ट ग्रिड का विस्तार करता है। grid-auto-rows/columns उनका आकार नियंत्रित करता है; minmax() उन्हें लचीला बनाता है। grid-auto-flow स्थिति-निर्धारण की दिशा तय करता है। dense पैकिंग खाली जगहों को आक्रामक रूप से भरती है — यह मेसनरी-शैली के लेआउट के लिए उपयोगी है, लेकिन दृश्य क्रम बिगाड़ सकती है।

शुरुआत निःशुल्क

एआई शिक्षक के साथ CSS सीखें — निःशुल्क

अपने ब्राउज़र में वास्तविक कोड लिखें और चलाएँ, चौबीसों घंटे एआई शिक्षक से तुरंत सहायता पाएँ, और वेब या ऐप पर वहीं से शुरू करें जहाँ आपने छोड़ा था।

पाठ्यक्रम: 40
पाठ: 159

निःशुल्क सीखना शुरू करें पूरा पाठ्यक्रम देखें

अक्सर पूछे जाने वाले प्रश्न

क्या “Implicit Grid और Grid-Auto-Flow” पाठ निःशुल्क है?

हाँ—“Implicit Grid और Grid-Auto-Flow” का पूरा पाठ यहाँ वेब पर निःशुल्क पढ़ा जा सकता है। इंटरैक्टिव अभ्यास (अंतर्निहित कोड संपादक और 24/7 एआई ट्यूटर) करने और CSS Academy पाठ्यक्रम का बाकी हिस्सा अनलॉक करने के लिए CoddyKit PRO लें। CSS Academy पाठ्यक्रम में कुल 4 पाठ शामिल हैं।

“Implicit Grid और Grid-Auto-Flow” में मैं क्या सीखूँगा?

समझिए कि CSS Grid implicit row और column से explicit track से आगे के item को कैसे संभालता है। आप ब्राउज़र में सीधे चलाए जाने वाले व्यावहारिक कोड के साथ CSS Academy का अभ्यास करते हैं, और पाठ पूरा करते समय 24/7 एआई ट्यूटर आपके प्रश्नों के उत्तर देता है।

क्या CSS Academy शुरू करने के लिए मुझे किसी अनुभव की आवश्यकता है?

पहले के अनुभव की आवश्यकता नहीं है। CoddyKit पर CSS Academy शुरुआती से लेकर उन्नत शिक्षार्थियों तक सभी के लिए व्यवस्थित किया गया है, इसलिए आप यहीं से या शुरुआत से सीखना शुरू कर सकते हैं और अपनी गति से आगे बढ़ सकते हैं। यह 4 में से 3वाँ पाठ है।

“Implicit Grid और Grid-Auto-Flow” पाठ पूरा करने में कितना समय लगता है?

CoddyKit का अधिकांश पाठ लगभग 5–10 मिनट में पूरा हो जाता है। हर पाठ छोटा और संवादात्मक है, इसलिए आप लगातार प्रगति करते हैं और वेब या ऐप पर वहीं से सीखना जारी रख सकते हैं जहाँ आपने छोड़ा था।

क्या मैं इस CSS Academy पाठ में कोड लिख और चला सकता हूँ?

हाँ। हर CSS Academy पाठ में एक अंतर्निर्मित कोड संपादक शामिल है, जिससे आप सीधे अपने ब्राउज़र में वास्तविक कोड लिख और चला सकते हैं और तुरंत एआई प्रतिक्रिया पा सकते हैं—स्थानीय सेटअप की आवश्यकता नहीं है।

इस पाठ्यक्रम के सभी पाठ

← CSS Academy पर वापस जाएँ