नोट: मैंने अभी नीचे दिए गए पाठ का अनुवाद किया है और इसे यहां पोस्ट किया है। संदर्भ इस लेख के अंत में हैं।

नमस्ते। आज मैं कुछ विशेष सीएसएस ग्रिड कीवर्ड के बारे में बात करना चाहता हूं जो ग्रिड ट्रैक के आकार को परिभाषित करने के लिए उपयोगी हैं। इन कीवर्ड का उपयोग करने की क्षमता आपको वांछित ग्रिड ट्रैक आकार को सटीक रूप से निर्धारित करने की अनुमति देगी। तो चलते हैं।

यह लेख सीएसएस ग्रिड श्रृंखला के मेरे परिचय का हिस्सा है। यदि आप मेरी पिछली पोस्ट देखना चाहते हैं, तो यहां आप सामग्री की पूरी तालिका पा सकते हैं।

आकार देने वाले कीवर्ड का परिचय

जब सीएसएस ग्रिड की बात आती है, तो केवल तीन कीवर्ड होते हैं जिनका उपयोग आप ट्रैक का आकार निर्धारित करने के लिए कर सकते हैं। ये कीवर्ड हैं ऑटो, मिन-कंटेंट और मैक्स-कंटेंट। इन सभी का उपयोग सीएसएस गुणों ग्रिड-टेम्पलेट-कॉलम और ग्रिड-टेम्पलेट-पंक्तियों में किया जा सकता है।

न्यूनतम-सामग्री और अधिकतम-सामग्री

यदि आप ग्रिड ट्रैक का आकार उसकी सामग्री पर निर्भर बनाना चाहते हैं, तो आपको दो कीवर्ड में से एक का उपयोग करना होगा: न्यूनतम-सामग्री या अधिकतम-सामग्री। न्यूनतम-सामग्री ग्रिड ट्रैक अपनी सामग्री को अतिप्रवाहित किए बिना न्यूनतम आकार बनाए रखने का प्रयास करेगा। मैक्स-कंटेंट ग्रिड ट्रैक, हालांकि, मानता है कि विस्तार करने के लिए खाली स्थान अनंत है और आपकी सामग्री के लिए आदर्श चौड़ाई मानता है।

मैं आपको कुछ उदाहरण दिखाता हूं जो उल्लिखित कीवर्ड के बीच अंतर दिखाते हैं। ध्यान रखें कि प्रत्येक छवि में दो कंटेनर होते हैं: बाईं ओर न्यूनतम-सामग्री ग्रिड कॉलम वाला कंटेनर और दाईं ओर अधिकतम-सामग्री ग्रिड कॉलम वाला कंटेनर।

जैसा कि आप यहां देख सकते हैं, न्यूनतम-सामग्री और अधिकतम-सामग्री कॉलम के बीच आकार में कोई अंतर नहीं है। इसका कारण यह है कि छवि का अपना "डिफ़ॉल्ट निश्चित आकार" है जो तब तक नहीं बदलेगा जब तक आप स्पष्ट रूप से इसे बदलने के लिए नहीं कहते। दूसरी ओर, किसी पाठ की सामग्री में स्थिति के आधार पर उसके आकार को "संपीड़ित" करने की क्षमता होती है। यह संपीड़न टेक्स्ट रैपिंग (टेक्स्ट रैपिंग) का उपयोग करके किया जाता है, यानी, एकल शब्द रैप नहीं होते हैं। यह जानने के बाद, आइए ऊपर दिए गए उदाहरण में छवि को कुछ पाठ से बदलें।

इस बार, कॉलम की चौड़ाई अलग है। कॉलम min-content अपने टेक्स्ट कंटेंट को "रैप" करने के लिए मजबूर करता है जबकि कॉलम max-content इतना विस्तारित हो जाता है कि टेक्स्ट रैपिंग की आवश्यकता नहीं होती है। ध्यान दें कि कॉलम min-content की चौड़ाई सबसे लंबे शब्द के समान है और कॉलम max-content अब कंटेनर से भी चौड़ा है।

क्या होगा जब एक कॉलम में एक से अधिक सामग्री प्रकार होंगे? नीचे छवि और पाठ वाले कॉलम का एक उदाहरण दिया गया है।

दोनों ही मामलों में, सबसे चौड़ा तत्व स्तंभ का आकार निर्धारित करता है। min-content के मामले में, यह तत्व छवि या सबसे लंबा शब्द है। कॉलम max-width के मामले में, यह एक छवि या संपूर्ण पाठ है। ध्यान दें कि कैसे दोनों सामग्री प्रकार कॉलम के भीतर लंबवत रूप से अलग किए गए हैं। मैं अपने भविष्य के लेखों में इस व्यवहार पर चर्चा करना चाहता हूं।

कीवर्ड ऑटो

कीवर्ड auto उस इकाई fr से संबंधित है जिसका वर्णन मैंने पिछले दो लेखों में किया था। यह इसी प्रकार निर्धारित करता है कि ग्रिड ट्रैक को किसी दिए गए अक्ष पर सभी उपलब्ध स्थान को "भरना" चाहिए।

.container {
    /** ... **/
    grid-template-columns: auto auto;
}

हालाँकि, ऑटो कीवर्ड और fr यूनिट के बीच दो मुख्य अंतर हैं। सबसे पहले, कीवर्ड auto एक इकाई नहीं है, इसलिए आप इसे संख्यात्मक मान (जैसे 2auto) के साथ उपयोग नहीं कर सकते हैं जैसे आप fr के साथ कर सकते हैं। दूसरा, कीवर्ड ऑटो हमेशा यूनिट fr के साथ "खो" जाता है, जब दोनों का एक साथ उपयोग किया जाता है। नीचे उदाहरण देखें।

.container {
    /** ... **/
    grid-template-columns: auto 1fr;
}

आप कॉलम ऑटो से क्षैतिज आयाम में कॉलम fr के बराबर स्थान "भरने" की उम्मीद कर सकते हैं। हालाँकि, कॉलम fr की उपस्थिति के कारण कॉलम अपने आकार को मौजूद सामग्री के आकार में स्वतः "छोटा" कर देता है।

ध्यान दें कि टेक्स्ट सामग्री के मामले में, ऑटो ग्रिड ट्रैक, न्यूनतम-सामग्री/अधिकतम-सामग्री ग्रिड ट्रैक से भिन्न व्यवहार करता है। जब ऑटो को fr के साथ मिश्रित किया जाता है, तो ऑटो-ट्रैक कभी भी पाठ्य सामग्री को "रैप" करने के लिए बाध्य नहीं करता है जब तक कि ऑटो-ट्रैक सभी उपलब्ध स्थान को "भर" नहीं देता है।

.container {
    /** ... **/
    width: 200px;
    grid-template-columns: auto 1fr;
}

इस संक्षिप्त लेख को पढ़ने के लिए धन्यवाद। यदि आप इस तरह की और सामग्री पढ़ना चाहते हैं, तो मेरे dev.to या ट्विटर अकाउंट को फ़ॉलो करें। साथ ही, बेझिझक मुझे किसी भी प्रकार की प्रतिक्रिया दें। मुझे आपकी टिप्पणियाँ पढ़ना अच्छा लगेगा। जल्द ही मेरे अगले लेख में मिलते हैं!

पीएस। यदि आप मेरे काम का समर्थन करना चाहते हैं, तो मैं एक कप कॉफी के लिए आभारी रहूंगा। धन्यवाद। ❤️

स्रोत

माटुस्ज़ किरमुच द्वारा लिखित लेख।