सीएसएस में आर्किटेक्चर का इस्तेमाल करने के लिए दूसरा प्रस्ताव

Rachel Andrew

पब्लिश करने की तारीख: 30 अप्रैल, 2024, पिछली बार अपडेट किए जाने की तारीख: 13 फ़रवरी, 2026

Chrome टीम, वेब पर मेसनरी टाइप लेआउट को लागू करने के लिए उत्सुक है. हालांकि, हमें लगता है कि इसे सीएसएस ग्रिड स्पेसिफ़िकेशन के हिस्से के तौर पर लागू करना एक गलती होगी. ऐसा हाल ही के WebKit पोस्ट में सुझाया गया है. हमें यह भी लगता है कि WebKit की पोस्ट में, मेसनरी लेआउट के ऐसे वर्शन के ख़िलाफ़ तर्क दिया गया है जिसे किसी ने भी प्रस्तावित नहीं किया था.

इसलिए, इस पोस्ट में यह बताया गया है कि Chrome को सीएसएस ग्रिड लेआउट स्पेसिफ़िकेशन के हिस्से के तौर पर मेसनरी को लागू करने में समस्याएं क्यों आ रही हैं. साथ ही, यह भी बताया गया है कि वैकल्पिक प्रस्ताव से क्या किया जा सकता है. कम शब्दों में:

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

क्या मेसनरी को ग्रिड का हिस्सा होना चाहिए?

Chrome टीम का मानना है कि मेसनरी को लेआउट का एक अलग तरीका होना चाहिए. इसे display: masonry का इस्तेमाल करके तय किया जाना चाहिए. हालांकि, अगर कोई बेहतर नाम तय किया जाता है, तो किसी दूसरे कीवर्ड का इस्तेमाल किया जाना चाहिए. इस पोस्ट में आगे, आपको कोड में इसके कुछ उदाहरण देखने को मिलेंगे.

हमें लगता है कि मेसनरी लेआउट, ग्रिड लेआउट से बेहतर है. इसकी दो वजहें हैं: लेआउट की परफ़ॉर्मेंस से जुड़ी समस्याएं और मेसनरी और ग्रिड, दोनों में ऐसी सुविधाएं होती हैं जो एक लेआउट के लिए सही होती हैं, लेकिन दूसरे के लिए नहीं.

परफ़ॉर्मेंस

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

इसलिए, अगर आपके पास मेसनरी लेआउट है और ट्रैक की परिभाषा grid-template-columns: 200px auto 200px है, तो आपको समस्याएं आने लगेंगी. ऐसा ग्रिड में अक्सर होता है. सबग्रिड जोड़ने पर, ये समस्याएं और बढ़ जाती हैं.

कुछ लोगों का मानना है कि ज़्यादातर लोगों को इस समस्या का सामना नहीं करना पड़ेगा. हालांकि, हमें पहले से ही पता है कि लोगों के पास बहुत बड़े ग्रिड होते हैं. हम ऐसा कोई प्रॉडक्ट शिप नहीं करना चाहते जिसका इस्तेमाल सीमित तरीके से किया जा सकता हो. ऐसा तब होता है, जब कोई दूसरा तरीका उपलब्ध हो.

हम उन चीज़ों के बारे में क्या करते हैं जो हर लेआउट के तरीके में काम नहीं करती हैं?

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

मेसनरी को ग्रिड में बंडल करने से, फ़ॉर्मैटिंग कॉन्टेक्स्ट और अलाइनमेंट प्रॉपर्टी जैसी चीज़ों की उपलब्धता के बीच का लिंक टूट जाता है. ये प्रॉपर्टी, फ़ॉर्मैटिंग कॉन्टेक्स्ट के हिसाब से Box Alignment स्पेसिफ़िकेशन में तय की जाती हैं.

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

ऐसे पैटर्न भी हैं जो मेसनरी लेआउट में काम के हो सकते हैं. उदाहरण के लिए, grid-template-columns: repeat(auto-fill, max-content). ऐसा इसलिए, क्योंकि इसमें क्रॉस कंस्ट्रेंट नहीं होते, लेकिन ग्रिड में अमान्य बने रहने चाहिए. यहां उन प्रॉपर्टी की सूची दी गई है जिनके लिए, हमें अलग-अलग वैल्यू की ज़रूरत होती है या जिनके लिए अलग-अलग मान्य वैल्यू होती हैं.

grid-template-areas: मेसनरी लेआउट में, सिर्फ़ मेसनरी लेआउट की दिशा में मौजूद शुरुआती लाइन तय की जा सकती है.
grid-template: शॉर्टहैंड में सभी अंतरों को शामिल करना होगा.
कानूनी वैल्यू में अंतर होने की वजह से, grid-template-columns और grid-template-rows के लिए साइज़िंग वैल्यू ट्रैक करें.
grid-auto-flow, मेसनरी पर लागू नहीं होता और masonry-auto-flow, ग्रिड पर लागू नहीं होता. इन्हें मर्ज करने से, ऐसी समस्याएं पैदा होंगी जो लेआउट के उस तरीके की वजह से अमान्य हैं जिसका इस्तेमाल किया जा रहा है.
ग्रिड में चार प्लेसमेंट प्रॉपर्टी (grid-column-start वगैरह) होती हैं, जबकि मेसनरी में सिर्फ़ दो होती हैं.
ग्रिड, justify-* और align-*, दोनों प्रॉपर्टी के सभी छह वैल्यू का इस्तेमाल कर सकता है. हालांकि, मेसनरी सिर्फ़ फ़्लेक्सबॉक्स जैसे सबसेट का इस्तेमाल करता है.

डेवलपर को यह भी बताना होगा कि ग्रिड-विथ-मेसनरी या ग्रिड-विदाउट-मेसनरी में मान्य न होने वाली वैल्यू का इस्तेमाल करने पर, सभी नई गड़बड़ियों के मामलों में क्या होगा. उदाहरण के लिए, grid-template-columns: masonry या grid-template-rows: masonry का इस्तेमाल किया जा सकता है, लेकिन दोनों का एक साथ इस्तेमाल नहीं किया जा सकता. दोनों को एक साथ इस्तेमाल करने पर क्या होता है? यह जानकारी इसलिए देनी होती है, ताकि सभी ब्राउज़र एक जैसा काम करें.

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

कोई अन्य प्रस्ताव

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

क्लासिक मेसनरी लेआउट

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

.masonry {
  display: masonry;
  masonry-template-tracks: repeat(auto-fill, minmax(14rem, 1fr));
  gap: 1rem;
}

एक जैसे साइज़ वाले ट्रैक.

अलग-अलग कॉलम की चौड़ाई के लिए, ग्रिड टाइप ट्रैक साइज़िंग का इस्तेमाल करना

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

.masonry {
  display: masonry;
  masonry-template-tracks: repeat(auto-fill, minmax(8rem, 1fr) minmax(16rem, 2fr)) minmax(8rem, 1fr);
  gap: 1rem;
}

चौड़े और पतले ट्रैक का पैटर्न.

मेसनरी लेआउट के लिए ट्रैक की अतिरिक्त साइज़िंग

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

max-content साइज़ वाले ट्रैक अपने-आप भरने की सुविधा.

.masonry {
  display: masonry;
  masonry-template-tracks: repeat(auto-fill, max-content);
  gap: 1rem;
}

auto साइज़ के ट्रैक अपने-आप भरने की सुविधा. इससे एक ही साइज़ के ट्रैक बनेंगे. हालांकि, सबसे बड़े ट्रैक के हिसाब से इनका साइज़ अपने-आप तय हो जाएगा.

.masonry {
  display: masonry;
  masonry-template-tracks: repeat(auto-fill, auto);
  gap: 1rem;
}

ऑटो साइज़ वाले ट्रैक के साथ मेसनरी लेआउट.

कॉन्टेंट को कॉलम में फैलाने और आइटम को मेसनरी लेआउट पर रखने की अनुमति दें

अलग मेसनरी स्पेसिफ़िकेशन में, कॉलम में फैले कॉन्टेंट को शामिल न करने की कोई वजह नहीं है. इसमें masonry-track प्रॉपर्टी का इस्तेमाल किया जा सकता है, क्योंकि यह masonry-track-start और masonry-track-end के लिए शॉर्टहैंड है. ऐसा इसलिए, क्योंकि मेसनरी लेआउट में आपके पास सिर्फ़ एक डाइमेंशन होता है.

.masonry {
  display: masonry;
  masonry-template-tracks: repeat(auto-fill, auto);
}

.span-2 {
  masonry-track: span 2; /* spans two columns */
}

.placed {
  masonry-track: 2 / 5; /* covers tracks 2, 3, and 4 */
}

मेज़नरी लेआउट में रखे गए और फैले हुए आइटम.

मेज़नरी ट्रैक का इस्तेमाल करने वाली सब-मेज़नरी या सबग्रिड

इसे अलग से मेसनरी स्पेसिफ़िकेशन के साथ इस्तेमाल किया जा सकता है. हालांकि, इसमें भी यह शर्त लागू होगी कि इंट्रिंसिक और फ़िक्स्ड साइज़ वाले ट्रैक को एक साथ इस्तेमाल नहीं किया जा सकता. यह तय करना होगा कि यह सुविधा कैसे काम करेगी. हमें नहीं लगता कि यह काम नहीं करेगा.

नतीजा

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

अगर आपका कोई सुझाव, राय या शिकायत है, तो समस्या 9041 में जाकर बातचीत में शामिल हों.

इस पोस्ट की समीक्षा करने और इस बारे में चर्चा करने के लिए, ब्रामस, टैब ऐटकिंस-बिटनर, ऊना क्रैवेट्स, इयान किलपैट्रिक, और क्रिस हैरेलसन का धन्यवाद.