सीएसएस ग्रिड लेआउट Fr यूनिट के लिए गाइड

सीएसएस ग्रिड लेआउट मॉड्यूल के साथ भेज दिया गया था नई सीएसएस इकाई इसको कॉल किया गया fr इकाई. जितना सीधा हो सकता है, fr है शब्द का संक्षिप्त नाम “अंश”. नई इकाई ग्रिड को आनुपातिक कॉलम या पंक्तियों में जल्दी से टुकड़ा करना संभव बनाती है। परिणामस्वरूप, का निर्माण पूरी तरह से संवेदनशील और लचीला ग्रिड लगभग एक हवा बन जाता है.

चूंकि अंश इकाई को ग्रिड लेआउट मॉड्यूल के साथ एक साथ पेश किया गया था, आप इसे किसी भी ब्राउज़र में उपयोग कर सकते हैं सीएसएस ग्रिड का समर्थन करता है. अगर आप भी यहां पुराने ब्राउजर्स को सपोर्ट करना चाहते हैं तो बढ़िया है सीएसएस ग्रिड पॉलीफ़िल यह आपको न केवल उपयोग करने की अनुमति देता है fr इकाई लेकिन अन्य ग्रिड सुविधाएँ भी.

मूल उपयोग

सबसे पहले, आइए एक नजर डालते हैं मूल ग्रिड जो भिन्न इकाई का उपयोग करता है। नीचे दिया गया लेआउट अंतरिक्ष को विभाजित करता है तीन बराबर-चौड़ाई वाले कॉलम तथा दो समान ऊंचाई वाली पंक्तियाँ.

संबंधित HTML से बना है छह विभाग के साथ चिह्नित .डिब्बा कक्षा, अंदर एक .आवरण div.

 
 
1.
 
2.
 
3.
 
4.
 
5.
 
6.
 
 

ग्रिड लेआउट मॉड्यूल का उपयोग करने के लिए, आपको जोड़ना होगा प्रदर्शन: ग्रिड; सीएसएस संपत्ति को आवरण के लिए। ग्रिड टेम्पलेट कॉलम संपत्ति का उपयोग करता है fr मूल्य के रूप में इकाई; तीन स्तंभों का अनुपात 1: 1: 1 है.

ग्रिड पंक्तियों के लिए (ग्रिड टेम्पलेट पंक्तियों संपत्ति), मैंने उपयोग नहीं किया fr इकाई, क्योंकि यह केवल समझ में आता है अगर आवरण एक निश्चित ऊंचाई है. अन्यथा, यह कुछ उपकरणों पर अजीब परिणाम हो सकता है, हालांकि, फिर भी, fr इकाई अनुपात बनाए रखता है (और यह बहुत बड़ा है).

ग्रिड की खाई संपत्ति एक 10px ग्रिड जोड़ता है बक्से के बीच में। यदि आप कोई अंतर नहीं चाहते हैं तो बस इस संपत्ति को हटा दें.

 .आवरण प्रदर्शन: ग्रिड; ग्रिड-टेम्प्लेट-कॉलम: 1 आर 1 एफ 1 एफ 1; ग्रिड-टेम्प्लेट-पंक्तियाँ: 200px 200px; ग्रिड-गैप: 10 पीएक्स;  .बॉक्स रंग: सफेद; पाठ-संरेखण: केंद्र; फ़ॉन्ट-आकार: 30 पीएक्स; गद्दी: 25 पीएक्स;  

नोट सीएसएस ऊपर कुछ मूल स्टाइल जैसे पृष्ठभूमि रंग शामिल नहीं है। आप ऐसा कर सकते हैं लेख के अंत में डेमो में पूर्ण कोड का पता लगाएं.

अनुपात बदलें

बेशक, आप केवल 1: 1: 1 का उपयोग नहीं कर सकते हैं किसी भी अनुपात आप चाहते हैं. नीचे, मैंने उपयोग किया 1: 2: 1 अंश वह भी अंतरिक्ष में विभाजित है तीन कॉलम लेकिन मध्य स्तंभ होगा दो बार के रूप में व्यापक अन्य दो के रूप में.

मैंने का मान भी बढ़ा दिया ग्रिड की खाई ताकि आप देख सकें कि यह लेआउट को कैसे बदलता है। मूल रूप से, ब्राउज़र व्यूपोर्ट की चौड़ाई से ग्रिड गैप घटाता है (इस उदाहरण में, ग्रिड अंतराल 80px तक जुड़ जाता है), और बाकियों को काट दिया दिए गए अंशों के अनुसार.

 .आवरण प्रदर्शन: ग्रिड; ग्रिड-टेम्प्लेट-कॉलम: 1fr 2fr 1fr; ग्रिड-टेम्प्लेट-पंक्तियाँ: 200px 200px; ग्रिड-गैप: 40 पीएक्स;  

जोड़ना fr अन्य सीएसएस इकाइयों के साथ

आप ऐसा कर सकते हैं जोड़ना fr के साथ इकाई किसी भी अन्य सीएसएस इकाइयों भी। उदाहरण के लिए, नीचे दिए गए उदाहरण में, मैंने उपयोग किया 60% 1fr 2fr मेरे ग्रिड के लिए अनुपात.

यह कैसे काम करता है? ब्राउज़र 60% व्यूपोर्ट चौड़ाई प्रदान करता है पहले स्तंभ के लिए। फिर, यह शेष स्थान को 1: 2 अंशों में विभाजित करता है.

वही बात भी लिखी जा सकती है 60% 13.33333% 26.66667%. लेकिन स्पष्ट रूप से, कोई भी उस प्रारूप का उपयोग क्यों करना चाहेगा? अंश इकाई का एक बड़ा फायदा यह है कि यह कोड पठनीयता में सुधार करता है. इसके अलावा, यह है पूरी तरह से सही, प्रतिशत स्वरूप के रूप में अभी भी केवल 99.9999% तक जुड़ता है.

 .आवरण प्रदर्शन: ग्रिड; ग्रिड-टेम्प्लेट-कॉलम: 60% 1fr 2fr; ग्रिड-टेम्प्लेट-पंक्तियाँ: 200px 200px; ग्रिड-गैप: 10 पीएक्स;  

प्रतिशत के अलावा, आप अन्य सीएसएस इकाइयों का भी उपयोग कर सकते हैं उदाहरण के लिए अंश इकाई के साथ pt, पिक्सल, एम, तथा रेम.

के साथ व्हॉट्सएप जोड़ें fr

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

जैसा कि आप देख सकते हैं, यह ग्रिड एक खाली कॉलम है जबकि यह अभी भी सभी छह बक्से को बरकरार रखता है। इस लेआउट के लिए, हमें स्पेस को ऊपर खिसकाना होगा चार कॉलम में तीन के बजाय। तो, हम उपयोग करते हैं १ एफआर १ एफआर १ एफआर १ एफआर के लिए मूल्य ग्रिड टेम्पलेट कॉलम संपत्ति.

हम अंदर खाली कॉलम जोड़ते हैं ग्रिड टेम्पलेट क्षेत्रों संपत्ति, का उपयोग कर डॉट नोटेशन. असल में, यह संपत्ति आपको अनुमति देती है ग्रिड क्षेत्रों का संदर्भ. और, आप ग्रिड क्षेत्रों को नाम दे सकते हैं ग्रिड क्षेत्र संपत्ति जो आपको उपयोग करने की आवश्यकता है प्रत्येक क्षेत्र के लिए अलग से.

 .आवरण प्रदर्शन: ग्रिड; ग्रिड-टेम्प्लेट-कॉलम: १ एफआर १ एफआर १ एफआर १ एफआर; ग्रिड-टेम्प्लेट-पंक्तियाँ: 200px 200px; ग्रिड-गैप: 10 पीएक्स; ग्रिड-टेम्प्लेट-क्षेत्र: "बॉक्स -1 बॉक्स -2, बॉक्स -3" "बॉक्स -4 बॉक्स -5- बॉक्स -6";  .box-1 ग्रिड-क्षेत्र: बॉक्स -1;  .box-2 ग्रिड-क्षेत्र: बॉक्स -2;  .box-3 ग्रिड-क्षेत्र: बॉक्स -3;  .box-4 ग्रिड-क्षेत्र: बॉक्स -4;  .box-5 ग्रिड-क्षेत्र: बॉक्स -5;  .box-6 ग्रिड-क्षेत्र: बॉक्स -6;  

व्हाट्सएप क्षेत्रों जरूरी नहीं कि एक कॉलम ही बने, वे कहीं भी हो सकता है ग्रिड में.

दोहराने () समारोह

आप भी उपयोग कर सकते हैं fr इकाई इसके साथ दोहराने () समारोह के लिए सरल वाक्यविन्यास. , यह आवश्यक नहीं है यदि आपके पास केवल एक साधारण ग्रिड है, लेकिन जब आप चाहें तब काम में आ सकते हैं एक जटिल लेआउट लागू करें, उदाहरण के लिए ए नेस्टेड ग्रिड.

 .आवरण प्रदर्शन: ग्रिड; ग्रिड-टेम्प्लेट-कॉलम: दोहराना (3, 1fr); / * ग्रिड-टेम्प्लेट-कॉलम: 1fr 1fr 1fr; * (ग्रिड-टेम्पलेट-पंक्तियाँ: 200px; ग्रिड-गैप: 10 पीएक्स;  

दोहराना (3, 1fr) वाक्य - विन्यास एक ही लेआउट में परिणाम जैसा 1fr 1fr 1fr. नीचे दिया गया लेआउट पहले उदाहरण के समान है.

अगर तुम गुणक बढ़ाएँ के अंदर दोहराने () फ़ंक्शन आपके पास अधिक कॉलम होंगे। उदाहरण के लिए, दोहराना (6, 1fr) का परिणाम छह बराबर स्तंभ. इस मामले में, हमारे सभी बक्से एक ही पंक्ति में होगा, जिसका अर्थ है कि इसके लिए केवल एक मान (200px) का उपयोग करना पर्याप्त है ग्रिड टेम्पलेट पंक्तियों संपत्ति.

 .आवरण प्रदर्शन: ग्रिड; ग्रिड-टेम्प्लेट-कॉलम: रिपीट (6, 1fr); ग्रिड-टेम्प्लेट-पंक्तियाँ: 200px; ग्रिड-गैप: 10 पीएक्स;  

आप उपयोग कर सकते हैं दोहराने () एक से ज्यादा बार. उदाहरण के लिए, निम्न उदाहरण में एक ग्रिड होता है जिसमें अंतिम तीन कॉलम होते हैं दो बार के रूप में व्यापक पहले तीन के रूप में.

 .आवरण प्रदर्शन: ग्रिड; ग्रिड-टेम्प्लेट-कॉलम: रिपीट (3, 1fr) रिपीट (3, 2fr); ग्रिड-टेम्प्लेट-पंक्तियाँ: 200px; ग्रिड-गैप: 10 पीएक्स;  

आप भी कर सकते हैं जोड़ना दोहराने () अन्य सीएसएस इकाइयों के साथ. उदाहरण के लिए, आप उपयोग कर सकते हैं 200px दोहराना (4, 1fr) 200px एक वैध कोड के रूप में.

यदि आप कैसे में रुचि रखते हैं जटिल लेआउट बनाएं CSS ग्रिड मॉड्यूल के साथ, दोहराने () समारोह और fr यूनिट राहेल एंड्रयू में एक दिलचस्प ब्लॉग पोस्ट है कि आप ऐसा कैसे कर सकते हैं.

प्रयोग करने का एक डेमो

आखिरकार, यहाँ डेमो मैंने वादा किया था. यह इस लेख में पहले उदाहरण के समान कोड का उपयोग करता है। इसे कांटा, और देखें कि आप क्या हासिल कर सकते हैं fr इकाई.