CSS का उपयोग करके मेसनरी लेआउट कैसे बनाएं

चिनाई लेआउट क्या है?

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

चिनाई लेआउट कैसे प्राप्त करें?

इसे प्राप्त करने के कई तरीके हैं, लेकिन grid-template-columns उपयोग करना और repeat() फ़ंक्शन का उपयोग करना सबसे अच्छा तरीका है। तो चलो शुरू हो जाओ।

ग्रिड grid-template-columns संपत्ति

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

यह रिपीट () फ़ंक्शन और ऑटो-प्लेसमेंट कीवर्ड का उपयोग करके प्राप्त किया जाता है। सारांशित करने के लिए, repeat() फ़ंक्शन हमें आवश्यकतानुसार कई बार कॉलम दोहराने की अनुमति देता है। उदाहरण के लिए, यदि हम 12-कॉलम ग्रिड बना रहे हैं, तो हम निम्नलिखित लिख सकते हैं:

 .grid { display: grid; /* define the number of grid columns */ grid-template-columns: repeat(12, 1fr); }

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

इसलिए हमें स्तंभों के लिए एक न्यूनतम चौड़ाई निर्दिष्ट करने की आवश्यकता है, यह सुनिश्चित करते हुए कि वे बहुत संकीर्ण न हों। हम minmax() function का उपयोग करके ऐसा कर सकते हैं।

 grid-template-columns: repeat(12, minmax(300px, 1fr));

लेकिन सीएसएस ग्रिड के काम करने के तरीके के कारण, पंक्ति ओवरफ़्लो हो जाएगी। हम स्पष्ट रूप से ब्राउज़र को प्रति पंक्ति 12 बार कॉलम दोहराने का निर्देश दे रहे हैं, इसलिए भले ही व्यूपोर्ट की चौड़ाई नई न्यूनतम चौड़ाई आवश्यकता के साथ उन सभी को फिट करने के लिए बहुत छोटी हो, कॉलम नई पंक्तियों में रैप नहीं होगा।

रैपिंग हासिल करने के लिए, हम auto-fit या auto-fill कीवर्ड का उपयोग कर सकते हैं।

 grid-template-columns: repeat(auto-fit, minmax(300px,1fr));

इन कीवर्ड्स का उपयोग करके, हम ब्राउज़र को निर्देश देते हैं कि वे हमारे लिए एलिमेंट रैपिंग और कॉलम साइज़िंग का ध्यान रखें, जिससे एलिमेंट्स पंक्तियों में लपेटने के लिए ओवरफ्लो हो जाएंगे।

यह ग्रिड अब कैसा दिखता है:

लेकिन यह चिनाई का लेआउट नहीं है। तो इसे कैसे प्राप्त करें? आइए देखते हैं।

ग्रिड grid-column और grid-row गुण

grid-column और grid-row गुण ग्रिड आइटम के आकार और ग्रिड लेआउट के भीतर स्थान निर्दिष्ट करते हैं। इस प्रकार, हम ग्रिड के भीतर एकल ग्रिड आइटम की चौड़ाई या ऊंचाई निर्दिष्ट करने में सक्षम होते हैं। और ऐसा करने के लिए, हम span कीवर्ड का उपयोग कर सकते हैं।

पहले ग्रिड आइटम की चौड़ाई बढ़ाने के लिए हम लिख सकते हैं:

 .grid-item: nth-child(1) { grid-column: span 2; grid-row: span 1; }

इसलिए पहला ग्रिड सेल दो स्तंभों को फैलाएगा और निम्नलिखित स्वरूप होगा:

इसी तरह, अगर हम दूसरे ग्रिड आइटम की ऊंचाई बढ़ाना चाहते हैं, तो हम लिख सकते हैं:

 .grid-item: nth-child(2) { grid-column: span 1; grid-row: span 2; }

दूसरी ग्रिड सेल इसलिए दो पंक्तियों में फैलेगी और निम्नलिखित रूप में होगी:

इसी तरह, यदि हम हर ग्रिड आइटम को वांछित तरीके से फैलाते हैं, तो हमें निम्नलिखित प्राप्त होंगे:

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

 .grid-item: nth-child(7n+1) { grid-column: span 2; grid-row: span 1; } .grid-item: nth-child(7n+2) { grid-column: span 1; grid-row: span 2; } .grid-item: nth-child(7n+4) { grid-column: span 1; grid-row: span 2; } .grid-item: nth-child(7n+5) { grid-column: span 3; grid-row: span 1; }

और यहाँ आउटपुट है:

लेकिन क्या यह काफी है? आइए कुछ परिप्रेक्ष्य जोड़कर इसे अगले स्तर पर ले जाएं।

हम इसे परिप्रेक्ष्य () जोड़कर और परिवर्तन () संपत्ति का उपयोग करके प्राप्त कर सकते हैं:

 .active { transform: perspective(18cm) rotate(20deg); transform-style: preserve-3d; transform-origin: left; }

इसके अतिरिक्त, हमारे पास एक मेनू बार है, जो चयनित होने पर, ग्रिड को एक नियमित ग्रिड से परिप्रेक्ष्य के साथ स्विच करता है। हम उसके लिए जावास्क्रिप्ट का उपयोग कर सकते हैं:

 menu.onclick=()=>{ grid.classList.toggle('active'); }

और अंतिम आउटपुट है:

आपको यह लेख पसंद आया? मुझे नीचे टिप्पणी में बताये!

जानना चाहते हैं कि डेटा विज़ुअलाइज़ेशन के लिए सबसे बहुमुखी जावास्क्रिप्ट समाधान कौन सा है? यहां पढ़ें: https://techvariable.com/blogs/the-most-versatile-js-solution-to-data-visualization-d3-js/