CSS Academy · पाठ

minmax के साथ Auto-fit और Auto-fill

minmax() के साथ auto-fit और auto-fill का उपयोग करके column की संख्या स्वचालित रूप से responsive बनाना सीखिए।

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

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

स्वतः-उत्तरदायी ग्रिड

CSS Grid का सबसे शक्तिशाली पैटर्न: ऐसा पूर्णतः उत्तरदायी ग्रिड जो किसी भी मीडिया क्वेरी के बिना कॉलम की संख्या अपने-आप समायोजित करता है और auto-fit या auto-fill को minmax() के साथ मिलाकर उपयोग करता है।

auto-fill

auto-fill दी गई न्यूनतम चौड़ाई में जितने कॉलम समा सकें, उतने से पंक्ति भरता है। खाली कॉलम अंत में खाली ट्रैक के रूप में बने रहते हैं।

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

auto-fit

auto-fit, auto-fill की तरह काम करता है, लेकिन खाली ट्रैक को शून्य चौड़ाई तक समेट देता है। मौजूदा आइटम शेष स्थान भरने के लिए फैल जाते हैं।

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

auto-fill और auto-fit का अंतर

यह अंतर केवल तब महत्वपूर्ण होता है जब पंक्ति भरने के लिए पर्याप्त आइटम न हों:

auto-fill: खाली कॉलम ट्रैक बने रहते हैं, आइटम पूरा स्थान भरने के लिए नहीं फैलते
auto-fit: खाली ट्रैक समेट दिए जाते हैं, आइटम पूरी उपलब्ध चौड़ाई भरने के लिए फैल जाते हैं

minmax() के साथ auto-fit

प्रसिद्ध उत्तरदायी ग्रिड पैटर्न — आइटम कम-से-कम 250px चौड़े होते हैं, स्थान भरने के लिए बढ़ते हैं और अपने-आप नई पंक्तियों में लपेटे जाते हैं:

  <div class="responsive-grid">
    <div>Card 1</div><div>Card 2</div><div>Card 3</div>
  </div>

minmax() की व्याख्या

minmax(min, max) ट्रैक के आकार की एक सीमा निर्धारित करता है। ट्रैक min से छोटा या max से बड़ा नहीं होगा। fr के साथ मिलकर यह न्यूनतम सीमा वाले लचीले ट्रैक बनाता है।

  <div class="track"><div>Flexible track</div></div>

स्थिर आइटम के लिए minmax के साथ auto-fill

जब आप आइटम को स्थिर आकार में रखना और अंत में खाली स्थान छोड़ना चाहते हों:

  <div class="icon-grid">
    <div>&#128295;</div><div>&#9881;</div><div>&#128296;</div>
  </div>

मीडिया क्वेरी के बिना उत्तरदायी लेआउट

यही इसका मुख्य लाभ है: repeat(auto-fit, minmax(280px, 1fr)) मोबाइल पर 1 कॉलम से लेकर बड़ी स्क्रीन पर जितने कॉलम समा सकें, उतने कॉलम तक अपने-आप अनुकूलित हो जाता है:

  <div class="cards">
    <div>Card A</div><div>Card B</div>
  </div>

अधिक सुरक्षित minmax के लिए min()

कच्चे पिक्सेल मान के बजाय न्यूनतम मान के रूप में min(100%, 280px) का उपयोग करके बहुत छोटे कंटेनर में होने वाली लेआउट समस्याओं से बचिए:

  <div class="grid"><div>Item</div></div>

मेसनरी-जैसे संरेखण के लिए auto-fill

auto-fill के साथ, जब आइटम की संख्या कॉलम की संख्या का गुणज न हो, तब अंत के खाली ट्रैक संरेखण बनाए रखते हैं — यह समान ग्रिड के लिए उपयोगी है।

ग्रिड का अंतर्निहित आकार-निर्धारण बनाम Flexbox

Flexbox का flex-wrap + flex: 1 1 250px तरीका समान है, लेकिन यह समान कॉलम चौड़ाई की गारंटी नहीं देता — आइटम असमान रूप से फैल सकते हैं। minmax वाला Grid पूरी तरह एकसमान ट्रैक सुनिश्चित करता है।

त्वरित जाँच

कौन-सा ग्रिड मान खाली ट्रैक को समेटकर आइटम को उपलब्ध स्थान भरने देता है और मीडिया क्वेरी के बिना उत्तरदायी कॉलम बनाता है?

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

पुनरावलोकन

repeat(auto-fit, minmax(250px, 1fr)) सबसे शक्तिशाली एकल उत्तरदायी ग्रिड पैटर्न है — किसी मीडिया क्वेरी की आवश्यकता नहीं होती। auto-fit खाली ट्रैक को समेट देता है, जिससे आइटम पूरी पंक्ति भर देते हैं। auto-fill समान संरेखण के लिए खाली ट्रैक बनाए रखता है। अंतराल के लिए इसे हमेशा gap के साथ जोड़िए।

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

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

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

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

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

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

क्या “minmax के साथ Auto-fit और Auto-fill” पाठ निःशुल्क है?

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

“minmax के साथ Auto-fit और Auto-fill” में मैं क्या सीखूँगा?

minmax() के साथ auto-fit और auto-fill का उपयोग करके column की संख्या स्वचालित रूप से responsive बनाना सीखिए। आप ब्राउज़र में सीधे चलाए जाने वाले व्यावहारिक कोड के साथ CSS Academy का अभ्यास करते हैं, और पाठ पूरा करते समय 24/7 एआई ट्यूटर आपके प्रश्नों के उत्तर देता है।

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

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

“minmax के साथ Auto-fit और Auto-fill” पाठ पूरा करने में कितना समय लगता है?

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

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

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

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

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