चिनाई लेआउट क्या है?  चिनाई का लेआउट तब होता है जब अलग-अलग आकार की वस्तुओं को बाहर रखा जाता है ताकि कोई असमान अंतराल न हो। आमतौर पर, जब आइटम ग्रिड व्यू में होते हैं, तो वे या तो पंक्ति-वार, कॉलम-वार या दोनों में संरेखित होते हैं। लेकिन एक चिनाई वाले लेआउट में, भले ही पंक्ति या स्तंभ में कोई छोटा तत्व हो, अगला तत्व जगह ले लेगा।   चिनाई लेआउट कैसे प्राप्त करें?  इसे प्राप्त करने के कई तरीके हैं, लेकिन   उपयोग करना और   फ़ंक्शन का उपयोग करना सबसे अच्छा तरीका है। तो चलो शुरू हो जाओ। grid-template-columns repeat()       ग्रिड grid-template-columns संपत्ति  स्पष्ट स्तंभ आकार के अलावा, सीएसएस ग्रिड के सबसे मूल्यवान और व्यावहारिक पहलुओं में से एक कॉलम को तब तक दोहराने की क्षमता है जब तक कि वे भर नहीं जाते हैं और फिर स्वचालित रूप से उनमें आइटम रख देते हैं। विशेष रूप से, ग्रिड में हम जितने कॉलम चाहते हैं, उतने कॉलम निर्दिष्ट करने का विकल्प और फिर उन कॉलमों की जवाबदेही का ब्राउज़र नियंत्रण देता है, जिसके परिणामस्वरूप छोटे व्यूपोर्ट आकारों पर कम कॉलम प्रदर्शित होते हैं और स्क्रीन की चौड़ाई बढ़ने पर अधिक कॉलम प्रदर्शित होते हैं।  यह रिपीट () फ़ंक्शन और ऑटो-प्लेसमेंट कीवर्ड का उपयोग करके प्राप्त किया जाता है। सारांशित करने के लिए,   फ़ंक्शन हमें आवश्यकतानुसार कई बार कॉलम दोहराने की अनुमति देता है। उदाहरण के लिए, यदि हम 12-कॉलम ग्रिड बना रहे हैं, तो हम निम्नलिखित लिख सकते हैं: repeat()   .grid { display: grid; /* define the number of grid columns */ grid-template-columns: repeat(12, 1fr); }    निर्देश का उपयोग करके, ब्राउज़र को निर्देश दिया जाता है कि वह उपलब्ध स्थान को स्तंभों में विभाजित करे ताकि प्रत्येक को एक समान हिस्सा प्राप्त हो। यानी, यह कितना भी बड़ा क्यों न हो, इस उदाहरण में ग्रिड में हमेशा 12 कॉलम होंगे। हालाँकि, यह काफी अच्छा नहीं है क्योंकि छोटे व्यूपोर्ट्स पर सामग्री बहुत कम हो जाएगी। 1fr  इसलिए हमें स्तंभों के लिए एक न्यूनतम चौड़ाई निर्दिष्ट करने की आवश्यकता है, यह सुनिश्चित करते हुए कि वे बहुत संकीर्ण न हों। हम   function का उपयोग करके ऐसा कर सकते हैं। minmax()   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/

The code in this story is for educational purposes. The readers are solely responsible for whatever they build with it.

Walkthroughs, tutorials, guides, and tips. This story will teach you how to do something new or how to do something better.

Read My Stories

यह ऑडियो कहानी की मूल भाषा में निर्मित है!

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

About Author

टिप्पणियाँ

लेबल

इस लेख में चित्रित किया गया था

Related Stories

Paint us Red and Call us Santa! Our Devs Just Gifted You a Sleigh of New Features!

टेलीग्राम: क्रिप्टो द्वीप का मुख्य भूमि से पुल

HackerNoon लेखन प्रतियोगिता जीतना चाहते हैं? #crypto-api प्रतियोगिता के विजेताओं की सलाह यहाँ पढ़ें

HackerNoon एक बहुभाषी प्लेटफ़ॉर्म है: सभी शीर्ष कहानियाँ अब 13 भाषाओं में उपलब्ध हैं

Paint us Red and Call us Santa! Our Devs Just Gifted You a Sleigh of New Features!

टेलीग्राम: क्रिप्टो द्वीप का मुख्य भूमि से पुल

HackerNoon लेखन प्रतियोगिता जीतना चाहते हैं? #crypto-api प्रतियोगिता के विजेताओं की सलाह यहाँ पढ़ें

HackerNoon एक बहुभाषी प्लेटफ़ॉर्म है: सभी शीर्ष कहानियाँ अब 13 भाषाओं में उपलब्ध हैं

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps