मेसनरी लेआउट: CSS और JS तरीके

मेसनरी विन्यास तत्वों को ऐसे स्तंभों में रखता है जहाँ हर तत्व अगली उपलब्ध ऊर्ध्वाधर जगह भरता है, जैसा कि पिनटेरेस्ट पर दिखाई देता है। स्तंभों की चौड़ाई समान होती है, लेकिन उनकी ऊँचाई अलग-अलग हो सकती है। परिणामस्वरूप बिना खाली सफ़ेद जगह वाली सघन और दृश्य रूप से गतिशील ग्रिड बनती है।

फ़्लैग सक्षम होने पर क्रोम और फ़ायरफ़ॉक्स grid-template-rows: masonry का समर्थन करते हैं। तत्व स्तंभों में रखे जाते हैं, लेकिन पंक्तियों का आकार उनकी सामग्री की ऊँचाई के अनुसार होता है, जिससे अलग-अलग ऊँचाई वाले तत्व बिना अंतराल के व्यवस्थित हो सकते हैं। यह भविष्य का मूल समाधान है।

CSS स्तंभ मेसनरी जैसा विन्यास बनाते हैं: columns: 3; column-gap: 1rem। तत्व हर स्तंभ में अपने-आप ऊपर से नीचे की ओर बहते हैं। सीमा यह है कि तत्व पंक्ति-दर-पंक्ति नहीं, बल्कि स्तंभ-दर-स्तंभ क्रम में आते हैं—पहले स्तंभ का शीर्ष, फिर दूसरे स्तंभ का शीर्ष आदि—जिससे पढ़ने का क्रम और सुगम्यता प्रभावित होती है।

तत्वों को स्तंभों के बीच टूटने से रोकने के लिए हर तत्व पर break-inside: avoid लगाएँ। इसके बिना कोई लंबा कार्ड दो स्तंभों में विभाजित होकर सामग्री को बीच से काट सकता है। कार्ड जैसी सामग्री के लिए CSS स्तंभों का उपयोग करते समय इसे हमेशा जोड़ें।

Masonry.js (डेविड DeSandro द्वारा) स्तंभों की ऊँचाई की गणना करके और हर तत्व को सबसे छोटे स्तंभ में रखकर पूर्ण स्थिति वाले तत्वों का स्थान बदलता है। Isotope इसमें क्रमबद्ध करने और फ़िल्टर करने की सुविधा जोड़ता है। दोनों को स्थानों की गणना और उन्हें लागू करने के लिए JavaScript की आवश्यकता होती है।

एक हल्का तरीका यह है: निश्चित स्तंभों और 1px वाली पंक्तियों का ग्रिड बनाएँ, फिर हर तत्व की सामग्री की ऊँचाई / पंक्ति की ऊँचाई के आधार पर उस पर grid-row-end: span N निर्धारित करने के लिए JS का उपयोग करें। तत्व ग्रिड पंक्ति का संरेखण बनाए रखते हुए अलग-अलग ऊँचाई प्राप्त करते हैं।

विंडो का आकार बदलने या छवियाँ लोड होने पर मेसनरी के स्थान पुराने हो जाते हैं। आकार में बदलाव का पता लगाने और पुनर्गणना शुरू करने के लिए ResizeObserver का उपयोग करें। तेज़ी से आकार बदलने की घटनाओं के दौरान अत्यधिक गणना से बचने के लिए पुनर्गणनाओं को डिबाउंस करें।

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

मेसनरी विन्यास में नए तत्व जोड़ने पर पूरे ग्रिड के बजाय केवल प्रभावित स्तंभों—अर्थात् नए तत्वों वाले स्तंभों—की पुनर्गणना करनी पड़ती है। Masonry.js जैसी लाइब्रेरी नए तत्वों के जुड़ने पर उनके गतिशील प्रभाव और क्रमिक विन्यास का समर्थन करती हैं, इसलिए हर नए समूह पर पूरे विन्यास को फिर से बनाने की आवश्यकता नहीं होती।

JavaScript से स्थान निर्धारित किए गए विन्यासों में मेसनरी का दृश्य क्रम DOM क्रम से अलग होता है। सुनिश्चित करें कि टैब क्रम दृश्य स्थिति के बजाय DOM क्रम, यानी तार्किक पढ़ने के क्रम, का अनुसरण करे। tabindex सावधानी से जोड़ें या कीबोर्ड नेविगेशन के लिए प्राकृतिक DOM प्रवाह पर निर्भर रहें।

CSS स्तंभ सरल होते हैं और JS की आवश्यकता नहीं होती, लेकिन पढ़ने का क्रम पंक्ति के बजाय स्तंभ के अनुसार होता है तथा फ़िल्टर या क्रमबद्ध करने की सुविधा नहीं होती। ग्रिड मेसनरी को अभी वास्तविक उपयोग के लिए पर्याप्त समर्थन नहीं मिला है। JS मेसनरी पूरी सुविधाएँ देती है, लेकिन स्थानों की गणना सामग्री लोड होने के बाद होने के कारण अतिरिक्त भार और प्रस्तुतिकरण में विलंब जोड़ती है।

मेसनरी विन्यास CSS स्तंभों से बनाया जा सकता है—जो सरल हैं लेकिन स्तंभ-क्रम का उपयोग करते हैं—प्रयोगात्मक grid-template-rows: masonry से बनाया जा सकता है, जो भविष्य का तरीका है, या Masonry.js जैसी JavaScript लाइब्रेरी से बनाया जा सकता है, जिसमें क्रमबद्ध करने और फ़िल्टर करने जैसी पूरी सुविधाएँ होती हैं। हर तरीके में सरलता, सुगम्यता और क्षमता के बीच अलग-अलग लाभ-हानियाँ होती हैं।