Chrome टीम वेब पर मैसनरी प्रकार के लेआउट लागू करने के लिए उत्सुक है. हालांकि, हमें लगता है कि हाल ही की WebKit पोस्ट में बताए गए तरीके से, इसे सीएसएस ग्रिड स्पेसिफ़िकेशन के हिस्से के तौर पर लागू करना एक गलती होगी. हमें यह भी लगता है कि WebKit पोस्ट में किसी ने छद्म तरीके के विरोध में तर्क दिया था, जिसका सुझाव कोई नहीं दे रहा था.
इसलिए, इस पोस्ट में यह बताया गया है कि Chrome में हमें सीएसएस ग्रिड लेआउट की खास बातों के हिस्से के रूप में मेसनरी लागू करने को लेकर चिंता क्यों है. साथ ही, इस पोस्ट में यह भी बताया गया है कि वैकल्पिक प्रस्ताव क्या चालू करता है. कम शब्दों में कहें:
- Chrome टीम, चिनाई को अनब्लॉक करने के लिए बहुत उत्सुक है, हम जानते हैं कि यह डेवलपर की इच्छा है.
- ग्रिड स्पेसिफ़िकेशन में मैसनरी जोड़ने से कई और वजहें हो सकती हैं. इनके अलावा, किसी और वजह से यह समस्या हो सकती है.
- ग्रिड स्पेसिफ़िकेशन के बाहर मैसनरी को तय करने से, चिनाई के लिए एक से ज़्यादा ट्रैक साइज़ या अलाइनमेंट या गैप जैसी प्रॉपर्टी के इस्तेमाल या ग्रिड लेआउट में इस्तेमाल की जाने वाली अन्य सुविधाओं के इस्तेमाल से नहीं बचा जा सकता.
क्या इमारतों को ग्रिड के तौर पर इस्तेमाल करना चाहिए?
Chrome टीम का मानना है कि मैसनरी एक अलग लेआउट तरीका होनी चाहिए जिसे display: masonry का इस्तेमाल करके तय किया गया हो (या किसी दूसरे कीवर्ड के लिए बेहतर नाम तय किया जाना चाहिए). इस पोस्ट में आगे, आप इसके कुछ उदाहरण देख सकते हैं
कि कोड में कैसा दिखेगा.
हमें लगता है कि ग्रिड लेआउट के बाहर मैसनरी को बेहतर समझा जाता है, इसकी दो वजहें हैं - लेआउट की परफ़ॉर्मेंस से जुड़ी समस्याओं की संभावना और दूसरा तथ्य कि मेसनरी और ग्रिड दोनों में ऐसी सुविधाएं हैं जो किसी एक लेआउट के काम की हैं, दूसरी नहीं.
परफ़ॉर्मेंस
ग्रिड और मैसनरी, ब्राउज़र के साइज़ और प्लेसमेंट में एक-दूसरे से उलट होती हैं. जब एक ग्रिड बनाया जाता है, तो सभी आइटम लेआउट से पहले रखे जाते हैं और ब्राउज़र को पता चल जाता है कि हर ट्रैक में क्या है. इससे कॉम्प्लेक्स स्वाभाविक आकार होने में मदद मिलती है, जो ग्रिड में बहुत काम की होती है. मेसनरी से, आइटम वैसे ही रखे जाते हैं जैसे उन्हें तय किया जाता है और ब्राउज़र को यह पता नहीं चलता कि हर ट्रैक में कितने आइटम हैं. यह समस्या सभी इंटेंसिक साइज़ के ट्रैक या सभी फ़िक्स साइज़ वाले ट्रैक के साथ नहीं है, लेकिन अगर फ़िक्स और इंट्रिक ट्रैक मिक्सी किए जाते हैं, तो यह समस्या नहीं है. इस समस्या को हल करने के लिए, ब्राउज़र को आकलन पाने के लिए हर संभावित तरीके से हर आइटम को शामिल करने से पहले लेआउट के चरण को पूरा करना होगा. बड़े ग्रिड के साथ इससे लेआउट की परफ़ॉर्मेंस की समस्याएं पैदा हो सकती हैं.
इसलिए, अगर आपके पास कोई मैसनरी लेआउट है, जिसमें ट्रैक की परिभाषा
grid-template-columns: 200px auto 200px है, तो इसे ग्रिड में करना बहुत आम बात है.
आपको समस्याएं आने लगती हैं. सबग्रिड जोड़ने के बाद ये समस्याएं बड़ी हो जाती हैं.
एक तर्क होता है कि ज़्यादातर लोग इसमें नहीं भागेंगे. हालांकि, हम पहले से जानते हैं कि लोगों के पास बहुत ज़्यादा ग्रिड होते हैं. हम ऐसा कोई प्रॉडक्ट नहीं भेजना चाहते जिसमें इस बात की सीमा हो कि उसका इस्तेमाल कैसे किया जाए. हालांकि, इसके लिए कोई दूसरा तरीका उपलब्ध होना चाहिए.
उन चीज़ों के बारे में हम क्या करते हैं जो लेआउट के हर तरीके से जुड़ी काम की नहीं हैं?
जब फ़्लेक्सबॉक्स और ग्रिड, सीएसएस का हिस्सा बने, तो डेवलपर को अक्सर यह महसूस हुआ कि उन्होंने अलग-अलग तरीके से काम किया है. ब्लॉक लेआउट के आधार पर, लेआउट के काम करने के तरीके के बारे में लंबे समय से अनुमान लगाए जाने की वजह से उन्हें अनुभव में अंतर दिख रहा था. समय के साथ, डेवलपर ने कॉन्टेक्स्ट को फ़ॉर्मैट करने के बारे में समझना शुरू कर दिया है. जब हम ग्रिड या फ़्लेक्सिबल फ़ॉर्मैटिंग के संदर्भ में स्विच करते हैं, तो कुछ चीज़ें अलग तरह से काम करती हैं. उदाहरण के लिए, आपको पता है कि जब आप फ़्लेक्सबॉक्स में होते हैं, तो अलाइनमेंट के सभी तरीके उपलब्ध नहीं होते, क्योंकि फ़्लेक्सबॉक्स एक डाइमेंशन वाला होता है.
मैसनरी को ग्रिड में बंडल करने से, फ़ॉर्मैटिंग कॉन्टेक्स्ट और अलाइनमेंट प्रॉपर्टी जैसी चीज़ों की उपलब्धता के बीच का यह साफ़ लिंक टूट जाता है. इनकी जानकारी, हर फ़ॉर्मैटिंग कॉन्टेक्स्ट के लिए बॉक्स अलाइनमेंट की खास जानकारी में दी गई है.
अगर हम चिनाई की मदद से, मिक्स्ड इंट्री और फ़िक्स ट्रैक डेफ़िनिशन को गैर-कानूनी तरीके से करके परफ़ॉर्मेंस की समस्या से निपटने का फ़ैसला लेते हैं, तो आपको याद रखना होगा कि ग्रिड लेआउट के लिए बहुत सामान्य पैटर्न काम नहीं करता है.
ऐसे पैटर्न भी हैं जो मसनरी में सही लग सकते हैं, जैसे 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 में होने वाली चर्चा में शामिल हों.
इस पोस्ट की समीक्षा करने और इससे जुड़ी बातचीत के लिए, ब्रैमस, टैब एटकिन्स-बिटनर, उना क्रावेट्स, इयन किलपैट्रिक, और क्रिस हैरलसन का धन्यवाद.