पब्लिश होने की तारीख: 19 सितंबर, 2024, पिछली बार अपडेट किए जाने की तारीख: 13 फ़रवरी, 2026
सीएसएस वर्किंग ग्रुप ने, सीएसएस मेसनरी के दोनों सुझावों को मिलाकर एक ड्राफ़्ट स्पेसिफ़िकेशन बनाया है. ग्रुप को उम्मीद है कि इससे दोनों की तुलना करना और फ़ाइनल फ़ैसला लेना आसान हो जाएगा. Chrome टीम अब भी मानती है कि मेसनरी लेआउट के लिए अलग सिंटैक्स का इस्तेमाल करना सबसे सही तरीका होगा. हमारी पिछली पोस्ट में बताई गई परफ़ॉर्मेंस से जुड़ी सबसे बड़ी समस्या हल हो गई है. हालांकि, सिंटैक्स, शुरुआती वैल्यू, और ग्रिड के साथ जोड़े गए वर्शन को सीखने में आसानी से जुड़ी समस्याएं अब भी बनी हुई हैं.
हालांकि, अपने अनुमानों की जांच करने के लिए, हमने कुछ उदाहरणों पर काम किया है. इससे यह पता चलेगा कि हर वर्शन के साथ मेसनरी कैसे काम करेगी. इस पोस्ट में दिए गए उदाहरण देखें और हमें अपने सुझाव/राय दें या शिकायत करें, ताकि हम इस सुविधा के बारे में फ़ैसला ले सकें और इसे आगे बढ़ा सकें.
इस पोस्ट में, इस्तेमाल के सभी संभावित उदाहरणों के बारे में नहीं बताया गया है. हालांकि, इससे यह साफ़ तौर पर पता चलता है कि मेसनरी को ग्रिड लेआउट से अलग करने पर, इस सुविधा की कार्यक्षमता में कोई कमी नहीं आएगी. असल में, ऐसा भी हो सकता है कि यह जानकारी सही न हो. इस पोस्ट में बताया गया है कि display: masonry वर्शन से, नई संभावनाएं मिलती हैं और सिंटैक्स को इस्तेमाल करना आसान हो जाता है.
इसके अलावा, कई डेवलपर ने यह भी शिकायत की है कि मेसनरी लेआउट में आइटम का क्रम बदलने से, सुलभता से जुड़ी समस्याएं हो सकती हैं. reading-flow प्रॉपर्टी का सुझाव देकर, सिंटैक्स के दोनों वर्शन के लिए भी इस समस्या को हल किया जा रहा है.
मेसनरी लेआउट का बुनियादी उदाहरण
ज़्यादातर लोग मेसनरी लेआउट के बारे में सोचते समय, इसी लेआउट के बारे में सोचते हैं. आइटम, लाइनों में दिखते हैं. पहली लाइन में आइटम रखने के बाद, छोटे आइटम की वजह से बची हुई जगह में बाकी आइटम आ जाते हैं.
display: masonry के साथ
मेसनरी लेआउट बनाने के लिए, display प्रॉपर्टी के लिए masonry वैल्यू का इस्तेमाल करें. इससे कॉलम ट्रैक के साथ मेसनरी लेआउट बनता है. कॉलम ट्रैक को तय किया जाता है या कॉन्टेंट के हिसाब से तय किया जाता है. साथ ही, मेसनरी को दूसरे ऐक्सिस में रखा जाता है. पहले आइटम को ब्लॉक और इनलाइन की शुरुआत में दिखाया जाता है. इसलिए, अंग्रेज़ी में यह सबसे ऊपर बाईं ओर दिखता है. साथ ही, आइटम को इनलाइन दिशा में लेआउट किया जाता है.
ट्रैक तय करने के लिए, masonry-template-tracks का इस्तेमाल करें. इसमें ट्रैक की लिस्टिंग की वैल्यू का इस्तेमाल किया जाता है. जैसे, सीएसएस ग्रिड लेआउट में किया जाता है.
.masonry {
display: masonry;
masonry-template-tracks: repeat(3, 1fr);
gap: 10px;
}
display: grid के साथ
मेसनरी लेआउट बनाने के लिए, सबसे पहले display प्रॉपर्टी के लिए grid वैल्यू का इस्तेमाल करके, ग्रिड लेआउट बनाएं. grid-template-columns प्रॉपर्टी का इस्तेमाल करके कॉलम तय करें. इसके बाद, grid-template-rows को masonry की वैल्यू दें.
इससे आपको उम्मीद के मुताबिक लेआउट मिलेगा. इसमें ग्रिड आइटम अपने-आप सेट हो जाएंगे. हालांकि, हर लाइन में मौजूद आइटम, मेसनरी लेआउट का इस्तेमाल करते हैं. साथ ही, वे पिछली लाइन में छोटे आइटम की वजह से खाली बची जगह को भरने के लिए फिर से व्यवस्थित हो जाएंगे.
.masonry {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: masonry;
gap: 10px;
}
दोनों विकल्पों के बीच इन बातों का ध्यान रखें
इन दोनों तरीकों में मुख्य अंतर यह है कि display: masonry वर्शन में, आपको मेसनरी लेआउट मिलता है. भले ही, आपने masonry-template-tracks के साथ कोई ट्रैक तय न किया हो. इसलिए, display: masonry का इस्तेमाल करके ही आपकी समस्या हल हो सकती है.
ऐसा इसलिए है, क्योंकि masonry-template-tracks की शुरुआती वैल्यू repeat(auto-areas, auto) है. लेआउट, कंटेनर में फ़िट होने वाले साइज़ के हिसाब से कई ट्रैक अपने-आप बना देता है.
ईंट-पत्थर से बना, पानी के बहाव को रोकने वाला स्ट्रक्चर
इस स्पेसिफ़िकेशन में, मेसनरी फ़्लो की दिशा बदलने के तरीके शामिल हैं. उदाहरण के लिए, फ़्लो को ब्लॉक-एंड से ऊपर की ओर दिखाने के लिए बदला जा सकता है.
display: masonry के साथ
display: masonry का इस्तेमाल करके मेसनरी लेआउट बनाएं. इसके बाद, masonry-direction का इस्तेमाल करें. इसकी वैल्यू column-reverse होनी चाहिए.
.masonry {
display: masonry;
masonry-template-tracks: repeat(3, 1fr);
masonry-direction: column-reverse;
}
display: grid के साथ
display: grid और grid-template-rows: masonry की मदद से मेसनरी लेआउट बनाएं.
इसके बाद, grid-auto-flow प्रॉपर्टी का इस्तेमाल करें. साथ ही, row-reverse की नई वैल्यू का इस्तेमाल करें, ताकि आइटम को ग्रिड कंटेनर के ब्लॉक एंड से लेआउट किया जा सके.
.masonry {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: masonry;
grid-auto-flow: row-reverse;
}
दोनों विकल्पों के बीच इन बातों का ध्यान रखें
display: masonry वर्शन, फ़्लेक्सबॉक्स के काम करने के तरीके से काफ़ी मिलता-जुलता है. कॉलम के फ़्लो की दिशा बदलने के लिए, masonry-direction प्रॉपर्टी का इस्तेमाल करें. इसकी वैल्यू column-reverse होनी चाहिए.
सीएसएस ग्रिड वर्शन में grid-auto-flow का इस्तेमाल किया जाता है. फ़िलहाल, grid-auto-flow: row-reverse और grid-auto-flow: column-reverse, दोनों का एक ही असर होगा. इससे आपको भ्रम हो सकता है, क्योंकि हो सकता है कि आपको उनसे कुछ और करने की उम्मीद हो.
लाइनों के लिए मेसनरी लेआउट
पंक्तियों को तय करने के लिए, दिशा भी बदली जा सकती है.
display: masonry के साथ
display: masonry की मदद से मेसनरी लेआउट बनाएं. इसके बाद, masonry-direction की वैल्यू को row पर सेट करें. अगर आपको अपनी लाइनों के लिए कोई खास ब्लॉक साइज़ नहीं चाहिए, तो आपको ट्रैक का कोई साइज़ तय करने की ज़रूरत नहीं है. ऐसा इसलिए, क्योंकि डिफ़ॉल्ट साइज़ auto होता है. इसलिए, ट्रैक का साइज़ उसमें मौजूद कॉन्टेंट के हिसाब से तय होगा.
.masonry {
display: masonry;
masonry-direction: row;
}
display: grid के साथ
.masonry {
display: grid;
grid-template-columns: masonry;
grid-template-rows: repeat(3, 1fr);
}
दोनों विकल्पों के बीच इन बातों का ध्यान रखें
उल्टे फ़्लो की तरह ही, कॉलम से लाइनों में display: masonry वर्शन बदलने का मतलब है कि masonry-direction की वैल्यू बदल गई है. ग्रिड वर्शन में, आपको grid-template-columns और grid-template-rows प्रॉपर्टी की वैल्यू बदलनी होंगी. इसके अलावा, अगर शॉर्टहैंड का इस्तेमाल किया जा रहा है, तो सिंटैक्स का क्रम बदलें.
स्विच करने के फ़्लो के इन दोनों उदाहरणों में, display: masonry वर्शन ज़्यादा बेहतर लगता है. फ़्लो को कंट्रोल करने वाली एक ही प्रॉपर्टी होती है: masonry-direction. इसकी वैल्यू इनमें से कोई एक होती है:
rowcolumnrow-reversecolumn-reverse
इसके बाद, masonry-template-tracks में साइज़ की ज़रूरी जानकारी जोड़ें. ऐसा तब करें, जब आपको डिफ़ॉल्ट रूप से सेट की गई वैल्यू की ज़रूरत न हो.
ग्रिड में, क्रम को उलटने के लिए आपको grid-auto-flow प्रॉपर्टी का इस्तेमाल करना होगा. साथ ही, रो मेसनरी को स्विच करने के लिए, grid-template-* प्रॉपर्टी की वैल्यू बदलें. मौजूदा ग्रिड सिंटैक्स में, ग्रिड ऐक्सिस के लिए वैल्यू को तय नहीं किया जा सकता. आपको हमेशा उस ऐक्सिस पर grid-template-* प्रॉपर्टी तय करनी होती हैं जिसकी वैल्यू masonry नहीं होती.
आइटम की पोज़िशन
दोनों वर्शन में, लाइन पर आधारित प्लेसमेंट का इस्तेमाल करके आइटम को साफ़ तौर पर रखा जा सकता है. इसके बारे में आपको ग्रिड लेआउट से पता चलेगा. दोनों वर्शन में, आइटम को सिर्फ़ ग्रिड ऐक्सिस में रखा जा सकता है. यह पहले से तय किए गए ट्रैक वाला ऐक्सिस होता है. आइटम को उस ऐक्सिस पर नहीं रखा जा सकता जो मेसनरी लेआउट बना रहा है.
display: masonry के साथ
यहां दिए गए सीएसएस कोड में, चार कॉलम वाला मेसनरी लेआउट तय किया गया है. इसलिए, ग्रिड ऐक्सिस कॉलम हैं. a क्लास वाला आइटम, पहले कॉलम की लाइन से तीसरे कॉलम की लाइन तक रखा गया है. यह नई masonry-track-* प्रॉपर्टी के साथ दो ट्रैक में फैला हुआ है. इसे masonry-track: 1 / 3; के शॉर्टहैंड के तौर पर भी तय किया जा सकता है.
.masonry {
display: masonry;
masonry-template-tracks: repeat(4, 1fr);
}
.a {
masonry-track-start: 1;
masonry-track-end: 3;
}
display: grid के साथ
यहां दिए गए सीएसएस कोड में, चार कॉलम वाला मेसनरी लेआउट तय किया गया है. इसलिए, ग्रिड ऐक्सिस कॉलम हैं. a क्लास वाले आइटम को पहले कॉलम की लाइन से तीसरे कॉलम की लाइन तक रखा गया है. यह grid-column-* प्रॉपर्टी वाले दो ट्रैक में फैला हुआ है. इसे grid-column: 1 / 3; के शॉर्टहैंड के तौर पर भी तय किया जा सकता है.
अगर ग्रिड ऐक्सिस कॉलम है, तो grid-row-* प्रॉपर्टी को अनदेखा कर दिया जाएगा. अगर ग्रिड ऐक्सिस लाइनें हैं, तो grid-columns-* प्रॉपर्टी को अनदेखा कर दिया जाएगा.
.masonry {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-template-rows: masonry;
}
.a {
grid-column-start: 1;
grid-column-end: 3;
}
दोनों सिंटैक्स के साथ, नाम वाली लाइनों का इस्तेमाल किया जा सकता है. नीचे दिए गए उदाहरणों में, a नाम की दो कॉलम लाइन वाली ग्रिड दिखाई गई है.
display: masonry के साथ
नाम वाली लाइनों को masonry-template-tracks एट्रिब्यूट की ट्रैक लिस्टिंग वैल्यू में तय किया जाता है. इस आइटम को a नाम की किसी भी लाइन के बाद रखा जा सकता है.
.masonry {
display: masonry;
masonry-template-tracks: 100px [a] auto [a] auto 100px;
}
.item {
masonry-track: a;
}
display: grid के साथ
नाम वाली लाइनों को grid-template-columns एट्रिब्यूट की ट्रैक लिस्टिंग वैल्यू में तय किया जाता है. आइटम को a नाम की पहली लाइन के बाद रखा गया है. अगर grid-row प्रॉपर्टी की वैल्यू दी गई है, तो उस पर ध्यान नहीं दिया जाएगा.
.masonry {
display: grid;
grid-template-columns: 100px [a] auto [a] auto 100px;
grid-template-rows: masonry;
}
.item {
grid-column: a;
grid-row: a; /* ignored */
}
दोनों सिंटैक्स में, नाम वाली जगहों का इस्तेमाल भी किया जा सकता है. यहां दिए गए उदाहरणों में, "a", "b", और "c" नाम के तीन ट्रैक वाली ग्रिड दिखाई गई है.
display: masonry के साथ
ट्रैक के नाम, masonry-template-areas की वैल्यू के तौर पर दिए जाते हैं. ट्रैक के साइज़ तय नहीं किए गए हैं. इसलिए, तीनों ट्रैक का साइज़ डिफ़ॉल्ट रूप से auto है. आइटम को "a" ट्रैक में रखा गया है.
.masonry {
display: masonry;
masonry-template-areas: "a b c";
}
.item {
masonry-track: a;
}
पंक्तियों या कॉलम को तय करने पर, यह एक जैसा काम करता है. सिर्फ़ masonry-direction प्रॉपर्टी में अंतर होता है.
display: grid के साथ
कॉलम के लिए, सिंटैक्स एक जैसा होता है. इसी तरह, ट्रैक के साइज़ तय न होने की वजह से, तीनों ट्रैक का डिफ़ॉल्ट साइज़ auto है. हालांकि, आपको यह साफ़ तौर पर बताना होगा कि दूसरा ऐक्सिस मेसनरी है:
.masonry {
display: grid;
grid-template-areas: "a b c";
grid-template-rows: masonry;
}
.item {
grid-column: a;
}
हालांकि, पंक्तियों के लिए वैल्यू को अलग तरीके से लिखना होता है, क्योंकि grid-template-areas असल में दो डाइमेंशन वाले एरिया को तय करता है. साथ ही, हर पंक्ति को अलग स्ट्रिंग के तौर पर लिखा जाता है:
.masonry {
display: grid;
grid-template-areas: "a" "b" "c"; /* Note the difference, each row is quoted. */
grid-template-columns: masonry;
}
.item {
grid-row: a;
}
दोनों विकल्पों के बीच इन बातों का ध्यान रखें
किसी भी पोज़िशनिंग के लिए, दिशा बदलने के मामले में display: masonry सिंटैक्स बेहतर तरीके से काम करता है. masonry-track-* प्रॉपर्टी, ग्रिड ऐक्सिस की दिशा में काम करती है. इसलिए, दिशा बदलने के लिए आपको सिर्फ़ masonry-direction की वैल्यू बदलनी होगी. ग्रिड वर्शन में, स्विच करने की सुविधा चालू करने के लिए, आपको कम से कम एक जैसी प्रॉपर्टी की ज़रूरत होगी. हालांकि, पिछले उदाहरणों में देखें कि ग्रिड वर्शन में दिशा बदलना कितना मुश्किल है.
शॉर्टहैंड
इस पोस्ट में, लंबी वैल्यू का इस्तेमाल किया गया है, ताकि यह साफ़ तौर पर पता चल सके कि कौनसी प्रॉपर्टी इस्तेमाल की जा रही हैं. हालांकि, display: masonry और display: grid, दोनों वर्शन को छोटी वैल्यू का इस्तेमाल करके तय किया जा सकता है.
display: masonry के साथ
display: masonry शॉर्टहैंड, masonry कीवर्ड का इस्तेमाल करता है. बेसिक मेसनरी लेआउट बनाने के लिए, इस सीएसएस का इस्तेमाल करें:
.masonry {
display: masonry;
masonry: repeat(3, 1fr);
}
लाइन पर आधारित मेसनरी लेआउट बनाने के लिए:
.masonry {
display: masonry;
masonry: row;
}
शॉर्टहैंड का इस्तेमाल करके, ट्रैक और लाइन पर आधारित लेआउट तय करने के लिए:
.masonry {
display: masonry;
masonry: repeat(3, 1fr) row;
}
display: grid के साथ
grid शॉर्टहैंड का इस्तेमाल करके, बुनियादी मेसनरी लेआउट बनाने के लिए.
.masonry {
display: grid;
grid: masonry / repeat(3, 1fr);
}
लाइन पर आधारित मेसनरी लेआउट बनाने के लिए:
.masonry {
display: grid;
grid: repeat(3, auto) / masonry;
}
ज़्यादा मुश्किल उदाहरणों में, display:masonry का सिंटैक्स आसान होता है. इसलिए, शॉर्टहैंड में ज़्यादा प्रॉपर्टी को एक साथ रखा जा सकता है. इससे यह ज़्यादा मुश्किल नहीं होता.
उदाहरण के लिए, मान लें कि आपको "a", "b", और "c" नाम के तीन कॉलम बनाने हैं. इनमें डेटा नीचे से ऊपर की ओर भरा जाता है.
display:masonry के साथ
display: masonry में, इन तीनों को एक साथ शॉर्टहैंड में सेट किया जा सकता है:
.masonry {
display: masonry;
masonry: column-reverse "a b c";
}
इनका साइज़ अपने-आप तय होता है. इसलिए, आपको साइज़ तय करने की ज़रूरत नहीं है. हालांकि, अगर आपको कोई खास साइज़ चाहिए, तो उसे जोड़ा जा सकता है. उदाहरण के लिए:
masonry: column-reverse 50px 100px 200px "a b c";.
साथ ही, हर कॉम्पोनेंट को अपनी पसंद के मुताबिक क्रम में लगाया जा सकता है. इसके लिए, आपको किसी खास क्रम को याद रखने की ज़रूरत नहीं है. अगर आपको कॉलम की जगह लाइनों को बदलना है, तो आपको सिर्फ़ column-reverse को row या row-reverse से बदलना होगा. बाकी सिंटैक्स वही रहेगा.
display: grid के साथ
display: grid में, इन तीन पहलुओं को अलग-अलग सेट करना होता है:
.masonry {
display: grid;
grid-template-rows: masonry;
grid-template-areas: "a b c";
grid-auto-flow: wrap-reverse;
}
मेसनरी के उदाहरण की तरह, इससे सभी कॉलम auto साइज़ के हो जाते हैं. हालांकि, अगर आपको साइज़ के बारे में साफ़ तौर पर बताना है, तो ऐसा किया जा सकता है:
.masonry {
display: grid;
grid: masonry / 50px 100px 200px;
grid-template-areas: "a b c";
grid-auto-flow: wrap-reverse;
}
इसके अलावा, अगर आपको साइज़ और एरिया के नाम एक साथ सेट करने के लिए 'grid' का इस्तेमाल करना है, तो:
.masonry {
display: grid;
grid: "a b c" masonry / 50px 100px 200px;
grid-auto-flow: wrap-reverse;
}
इन दोनों उदाहरणों में, क्रम का पालन करना ज़रूरी है. अगर आपको पंक्तियां चाहिए, तो क्रम अलग होगा. उदाहरण के लिए, पंक्तियों में बदलने पर यह इस तरह दिखता है:
.masonry {
display: grid;
grid: 50px 100px 200px / masonry;
grid-template-areas: "a" "b" "c";
}
या, इन सभी को एक शॉर्टहैंड में डालने के लिए:
.masonry {
display: grid;
grid: "a" 50px "b" 100px "c" 200px / masonry;
}
दोनों विकल्पों के बीच इन बातों का ध्यान रखें
display: masonry शॉर्टहैंड का इस्तेमाल बड़े पैमाने पर किया जा सकता है, क्योंकि यह एक
आसान शॉर्टहैंड है. कई मामलों में, "स्टैंडर्ड" मेसनरी लेआउट के लिए, आपको सिर्फ़ ट्रैक की परिभाषाएं सेट करनी होंगी. अन्य सभी वैल्यू डिफ़ॉल्ट वैल्यू के तौर पर इस्तेमाल की जा सकती हैं.
display: grid वर्शन में, मौजूदा grid शॉर्टहैंड का इस्तेमाल किया जाता है. यह एक काफ़ी मुश्किल शॉर्टहैंड है. हमारे अनुभव के मुताबिक, डेवलपर इसका इस्तेमाल कम करते हैं. ऊपर दिए गए उदाहरणों में दिखाया गया है कि सामान्य मेसनरी लेआउट के लिए भी, वैल्यू का क्रम सेट करते समय सावधानी बरतनी पड़ती है.
दूसरी ज़रूरी बातें
इस पोस्ट में, आज के समय में इस्तेमाल के कुछ सामान्य उदाहरण दिए गए हैं. हालांकि, हमें यह नहीं पता कि आने वाले समय में ग्रिड या मेसनरी लेआउट का इस्तेमाल किस तरह किया जाएगा. अलग display: masonry सिंटैक्स का इस्तेमाल करने का एक बड़ा फ़ायदा यह है कि इससे आने वाले समय में दोनों में अंतर किया जा सकता है. खास तौर पर, शुरुआती वैल्यू के साथ—जैसे कि masonry-template-tracks के लिए—ग्रिड की तुलना में मेसनरी में कुछ अलग करना फ़ायदेमंद हो सकता है. display: grid वर्शन का इस्तेमाल करने पर, हम ग्रिड के डिफ़ॉल्ट सेटिंग में बदलाव नहीं कर सकते. इससे, आने वाले समय में कुछ काम करने में समस्या आ सकती है.
इन उदाहरणों में, ऐसी जगहों को देखा जा सकता है जहां ब्राउज़र को उन प्रॉपर्टी को अनदेखा करना पड़ता है जो मेसनरी का इस्तेमाल करते समय ग्रिड में मान्य होती हैं.
उदाहरण के लिए grid-template-areas, जहां ज़्यादातर वैल्यू को हटा दिया जाता है, क्योंकि यह दो डाइमेंशन वाला ग्रिड लेआउट तय करता है. वहीं, मेसनरी में हम सिर्फ़ एक डाइमेंशन को पूरी तरह से तय करते हैं.
हमें सुझाव दें
इन उदाहरणों के साथ-साथ, ड्राफ़्ट स्पेसिफ़िकेशन भी देखें. इसमें हर वर्शन को एक साथ दिखाया गया है. समस्या 9041 पर टिप्पणी करके हमें बताएं कि आपको यह सुविधा कैसी लगी. इसके अलावा, अगर आपको अपने ब्लॉग या सोशल मीडिया पर कोई पोस्ट लिखनी है, तो हमें X या LinkedIn पर ज़रूर बताएं.