CSS ग्रिड लेआउट माइनमैक्स का उपयोग कैसे करें ()
सीएसएस ग्रिड लेआउट मॉड्यूल एक शुरू करने से अगले स्तर के लिए उत्तरदायी डिजाइन लेता है नए तरह का लचीलापन ऐसा पहले कभी नहीं देखा गया था। अब, हम केवल नहीं कर सकते कस्टम ग्रिड को परिभाषित करें विशुद्ध रूप से पूरी तरह से शुद्ध सीएसएस के साथ तेजी से, लेकिन सीएसएस ग्रिड भी है कई छिपे हुए रत्न जो हमें ग्रिड को आगे बढ़ाने और जटिल लेआउट प्राप्त करने की अनुमति देता है.
न्यूनतम अधिकतम() समारोह इन कम व्यापक रूप से ज्ञात विशेषताओं में से एक है। यह ग्रिड ट्रैक के आकार को परिभाषित करना संभव बनाता है न्यूनतम से अधिकतम सीमा तक ताकि ग्रिड प्रत्येक उपयोगकर्ता के व्यूपोर्ट के लिए सर्वोत्तम संभव तरीके से अनुकूल हो सके.
वाक्य - विन्यास
का वाक्य विन्यास न्यूनतम अधिकतम() फ़ंक्शन अपेक्षाकृत सरल है, यह लेता है दो तर्क: एक न्यूनतम और एक अधिकतम मूल्य:
minmax (न्यूनतम, अधिकतम)
मिनट मूल्य छोटा होना है से अधिकतम, अन्यथा अधिकतम ब्राउज़र द्वारा अनदेखा कर दिया जाता है.
हम उपयोग कर सकते हैं न्यूनतम अधिकतम() समारोह के रूप में का मूल्य ग्रिड टेम्पलेट कॉलम या ग्रिड टेम्पलेट पंक्तियों संपत्ति (या दोनों). हमारे उदाहरण में, हम पूर्व का उपयोग करेंगे, क्योंकि यह बहुत अधिक उपयोग का मामला है.
.कंटेनर प्रदर्शन: ग्रिड; ग्रिड-टेम्प्लेट-कॉलम: माइनमैक्स (100px, 200px) 1fr 1fr; ग्रिड-टेम्पलेट-पंक्तियाँ: 100px 100px 100px; ग्रिड-गैप: 10 पीएक्स;
नीचे दिए गए कोडपेन डेमो में, आप पा सकते हैं HTML और CSS कोड हम पूरे लेख में उपयोग करेंगे.
हम प्रयोग कर सकते हैं विभिन्न प्रकार के मूल्य के अंदर न्यूनतम अधिकतम() फ़ंक्शन, सभी इस बात पर निर्भर करता है कि हम किस तरह का कस्टम ग्रिड बनाना चाहते हैं.
स्थैतिक लंबाई मान
दो बुनियादी तरीके हैं कि हम कैसे उपयोग कर सकते हैं न्यूनतम अधिकतम() के साथ कार्य करें स्थिर लंबाई मान.
सबसे पहले, हम उपयोग कर सकते हैं न्यूनतम अधिकतम() केवल एक ग्रिड कॉलम के लिए और अन्य कॉलमों की चौड़ाई को साधारण स्टैटिक वैल्यूज़ (पिक्सल के रूप में परिभाषित करें).
ग्रिड-टेम्प्लेट-कॉलम: माइनमैक्स (100px, 200px) 200px 200px;
नीचे gif डेमो पर, आप देख सकते हैं कि यह लेआउट है उत्तरदायी नहीं है, हालांकि पहला कॉलम है कुछ लचीलापन. दूसरा और तीसरा कॉलम अपनी निश्चित चौड़ाई (200px) को बनाए रखते हैं जबकि पहला कॉलम 100px से 200px तक होता है, उपलब्ध स्थान के आधार पर.
दूसरी बात, हम इसकी चौड़ाई को परिभाषित कर सकते हैं एक से अधिक ग्रिड कॉलम का उपयोग करते हुए न्यूनतम अधिकतम(). न्यूनतम और अधिकतम मूल्य दोनों स्थिर हैं, इसलिए डिफ़ॉल्ट रूप से, ग्रिड है उत्तरदायी नहीं है. हालाँकि, कॉलम स्वयं हैं लचीला, लेकिन केवल 100px और 200px के बीच। वे एक साथ बढ़ें और सिकुड़ें जैसा कि हम व्यूपोर्ट का आकार बदलते हैं.
ग्रिड-टेम्पलेट-कॉलम: माइनमैक्स (100px, 200px) माइनमैक्स (100px, 200px) माइनमैक्स (100px, 200px);
ध्यान दें कि हम भी कर सकते हैं उपयोग दोहराने () समारोह के साथ toghter न्यूनतम अधिकतम(). तो, पिछले कोड स्निपेट को भी इस तरह लिखा जा सकता है:
ग्रिड-टेम्प्लेट-कॉलम: रिपीट (3, माइनमैक्स (100 पीएक्स, 200 पीएक्स));
गतिशील लंबाई मान
स्थिर मूल्यों के अलावा, न्यूनतम अधिकतम() फ़ंक्शन भी स्वीकार करता है प्रतिशत इकाइयाँ और यह नया अंश (fr) इकाई तर्क के रूप में। उनका उपयोग करके, हम कस्टम ग्रिड प्राप्त कर सकते हैं जो दोनों हैं उत्तरदायी तथा उनके आयाम बदलें उपलब्ध स्थान के अनुसार.
नीचे दिए गए कोड में एक ग्रिड होता है जिसमें पहले कॉलम की चौड़ाई होती है 50% और 80% के बीच की सीमा जबकि दूसरा और तीसरा शेष स्थान को समान रूप से साझा करें.
ग्रिड-टेम्प्लेट-कॉलम: माइनमैक्स (50%, 80%) 1fr 1fr;
जब हम गतिशील मूल्यों का उपयोग करते हैं न्यूनतम अधिकतम() फ़ंक्शन, यह सेट अप करने के लिए महत्वपूर्ण है नियम जो समझ में आता है. मैं आपको एक उदाहरण दिखाता हूं जहां उदाहरण है ग्रिड टूट जाता है:
ग्रिड-टेम्प्लेट-कॉलम: माइनमैक्स (1fr, 2fr) 1fr 1fr;
यह नियम कोई मतलब नहीं है, जैसा कि ब्राउज़र है निर्णय लेने में असमर्थ कौन सा मान असाइन करना है न्यूनतम अधिकतम() समारोह। न्यूनतम मूल्य एक के लिए नेतृत्व करेंगे 1fr 1fr 1fr स्तंभ की चौड़ाई, जबकि अधिकतम तक 2fr 1fr 1fr. लेकिन, दोनों बहुत छोटे पर्दे पर भी संभव हैं। वहाँ है ब्राउज़र से संबंधित कुछ भी नहीं हो सकता है.
यहाँ परिणाम है:
स्थिर और गतिशील मूल्यों को मिलाएं
यह भी संभव है स्थिर और गतिशील मूल्यों को मिलाएं. उदाहरण के लिए, ऊपर दिए गए कोडपेन डेमो में, मैंने इस्तेमाल किया minmax (100px, 200px) 1fr 1fr; नियम है कि एक ग्रिड में परिणाम जहां पहला स्तंभ 100px और 200px के बीच की सीमा और शेष स्थान है समान रूप से अन्य दो के बीच साझा किया गया.
ग्रिड-टेम्प्लेट-कॉलम: माइनमैक्स (100px, 200px) 1fr 1fr;
यह देखने के लिए इंटरसेप्ट है कि जैसे ही व्यूपोर्ट बढ़ता है, पहले, पहला कॉलम 100px से 200px तक बढ़ता है। अन्य दो, fr इकाई द्वारा शासित, बढ़ने लगते हैं पहले के बाद ही इसकी अधिकतम चौड़ाई तक पहुंच गया. यह तार्किक है, क्योंकि अंश इकाई का लक्ष्य उपलब्ध (शेष) स्थान को विभाजित करना है.
मिनट-सामग्री, अधिकतम-सामग्री, तथा ऑटो कीवर्ड
वहां एक तीसरे प्रकार का मान हम करने के लिए असाइन कर सकते हैं न्यूनतम अधिकतम() समारोह। मिनट-सामग्री, अधिकतम-सामग्री, तथा ऑटो कीवर्ड ग्रिड ट्रैक के आयामों से संबंधित हैं इसमें सामग्री शामिल है.
अधिकतम-सामग्री
अधिकतम-सामग्री कीवर्ड ब्राउज़र को निर्देशित करता है कि ग्रिड कॉलम की आवश्यकता है जितना चौड़ा तत्व उतना ही व्यापक.
नीचे डेमो पर, मैंने एक रखा 400px चौड़ी छवि पहले ग्रिड ट्रैक के अंदर, और निम्नलिखित सीएसएस नियम का उपयोग किया (आप लेख के अंत में पूर्ण संशोधित कोड के साथ कोडपेन डेमो पा सकते हैं):
.कंटेनर ग्रिड-टेम्प्लेट-कॉलम: अधिकतम सामग्री 1fr 1fr; / ** * minmax के साथ भी यही () संकेतन: * ग्रिड-टेम्पलेट-कॉलम: minmax (अधिकतम-सामग्री, अधिकतम-सामग्री) 1fr 1fr; * *
मैंने इस्तेमाल नहीं किया है न्यूनतम अधिकतम() संकेतन अभी तक, लेकिन ऊपर की टिप्पणी में आप देख सकते हैं कि एक ही कोड इसके साथ कैसा दिखेगा (हालाँकि यह यहाँ बहुत ही शानदार है).
जैसा कि आप देख सकते हैं, पहला ग्रिड कॉलम अपने व्यापक तत्व (यहाँ छवि) के समान विस्तृत है। इस तरह, उपयोगकर्ता हमेशा छवि देख सकते हैं पूरे आकार में. हालांकि, एक निश्चित व्यूपोर्ट आकार के तहत, यह लेआउट है उत्तरदायी नहीं है.
मिनट-सामग्री
मिनट-सामग्री कीवर्ड ब्राउज़र को निर्देशित करता है कि ग्रिड कॉलम को जितना हो सके उतना चौड़ा होना चाहिए सबसे संकरा तत्व इसमें होता है, एक तरह से कि एक अतिप्रवाह के लिए नेतृत्व नहीं करता है.
आइए देखें कि छवि के साथ पिछला डेमो कैसा दिखता है यदि हम पहले कॉलम के मूल्य को बदलते हैं मिनट-सामग्री:
.कंटेनर ग्रिड-टेम्प्लेट-कॉलम: मिन-कंटेंट 1 आर 1 एफआर; / ** * minmax के साथ एक ही () संकेतन: * ग्रिड-टेम्पलेट-कॉलम: minmax (न्यूनतम-सामग्री, न्यूनतम-सामग्री) 1fr 1fr; * *
मैंने छवि के नीचे हरे रंग की पृष्ठभूमि को छोड़ दिया ताकि आप पहले ग्रिड सेल के पूर्ण आकार को देख सकें.
जैसा कि आप देख सकते हैं, पहला कॉलम सबसे छोटी चौड़ाई को बरकरार रखता है एक अतिप्रवाह के बिना प्राप्त किया जा सकता है. इस उदाहरण में, इसे 4 वीं और 7 वीं ग्रिड कोशिकाओं की न्यूनतम चौड़ाई से परिभाषित किया जाएगा, जो इससे उपजी है गद्दी तथा फ़ॉन्ट आकार गुण, पहली कोशिका में छवि के रूप में शून्य में सिकुड़ा जा सकता है बिना अतिप्रवाह के.
यदि ग्रिड सेल में टेक्स्ट स्ट्रिंग होती है, मिनट-सामग्री होने वाला सबसे लंबे शब्द की चौड़ाई के बराबर, जैसा कि सबसे छोटा तत्व है जो आगे एक अतिप्रवाह के बिना छोटा नहीं हो सकता है। यहाँ BitsOfCode का एक शानदार लेख है जहाँ आप देख सकते हैं कि कैसे मिनट-सामग्री तथा अधिकतम-सामग्री ग्रिड सेल में टेक्स्ट स्ट्रिंग होने पर व्यवहार करें.
का उपयोग करते हुए मिनट-सामग्री तथा अधिकतम-सामग्री साथ में
हम अगर उपयोग मिनट-सामग्री तथा अधिकतम-सामग्री साथ में के अंदर न्यूनतम अधिकतम() फ़ंक्शन हमें एक ग्रिड कॉलम मिलता है जो:
- उत्तरदायी है
- कोई अतिप्रवाह नहीं है
- अपने व्यापक तत्व की तुलना में व्यापक नहीं बढ़ता है
.कंटेनर ग्रिड-टेम्प्लेट-कॉलम: मिनमैक्स (न्यूनतम सामग्री, अधिकतम सामग्री) 1fr 1fr;
हम भी उपयोग कर सकते हैं मिनट-सामग्री तथा अधिकतम-सामग्री कीवर्ड अन्य लंबाई मूल्यों के साथ के अंदर न्यूनतम अधिकतम() कार्य, जब तक नियम समझ में नहीं आता। उदाहरण के लिए, माइनमैक्स (25%, अधिकतम सामग्री) या मिनमैक्स (न्यूनतम सामग्री, 300 पीएक्स) दोनों वैध नियम होंगे.
ऑटो
अंत में, हम भी उपयोग कर सकते हैं ऑटो कीवर्ड के तर्क के रूप में न्यूनतम अधिकतम() समारोह.
कब ऑटो है एक अधिकतम के रूप में इस्तेमाल किया, इसका मान समान है अधिकतम-सामग्री.
जब यह बात है एक न्यूनतम के रूप में इस्तेमाल किया, इसका मान इसके द्वारा निर्दिष्ट होता है न्यूनतम-चौड़ाई / मिनट ऊंचाई नियम, जिसका अर्थ है ऑटो कभी-कभी के समान है मिनट-सामग्री, परंतु हर बार नहीं.
हमारे पिछले उदाहरण में, मिनट-सामग्री के बराबर होता है ऑटो, पहले ग्रिड कॉलम की न्यूनतम चौड़ाई हमेशा इसकी न्यूनतम ऊंचाई से छोटी होती है। तो, संबंधित CSS नियम:
.कंटेनर ग्रिड-टेम्प्लेट-कॉलम: मिनमैक्स (न्यूनतम सामग्री, अधिकतम सामग्री) 1fr 1fr;
इस तरह भी लिखा जा सकता है:
.कंटेनर ग्रिड-टेम्प्लेट-कॉलम: माइनमैक्स (ऑटो, ऑटो) 1fr 1fr;
ऑटो कीवर्ड भी हो सकता है अन्य स्थिर और गतिशील इकाइयों के साथ मिलकर उपयोग किया जाता है (पिक्सल, फ्रिज यूनिट, प्रतिशत आदि) के अंदर न्यूनतम अधिकतम() समारोह, उदाहरण के लिए माइनमैक्स (ऑटो, 300 पीएक्स) एक वैध नियम होगा.
आप परीक्षण कर सकते हैं कि कैसे मिनट-सामग्री, अधिकतम-सामग्री, तथा ऑटो कीवर्ड के साथ काम करते हैं न्यूनतम अधिकतम() निम्नलिखित कोडपेन डेमो में कार्य करें:
