सुझाव ज़रूरी है: हम सीएसएस मेसनरी के बारे में कैसे बताएं?

Rachel Andrew

Ian Kilpatrick

Tab Atkins-Bittner

पब्लिश होने की तारीख: 19 सितंबर, 2024

सीएसएस वर्किंग ग्रुप ने सीएसएस के दो प्रस्तावों को एक ड्राफ़्ट स्पेसिफ़िकेशन में जोड़ दिया है. ग्रुप को उम्मीद है कि इससे, दोनों की तुलना करना और फ़ैसला लेना आसान हो जाएगा. 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 का इस्तेमाल करके, मैसोनरी लेआउट बनाएं. इसके बाद, column-reverse की वैल्यू के साथ masonry-direction का इस्तेमाल करें.

.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 वर्शन, फ़्लेक्सबॉक्स के काम करने के तरीके से काफ़ी मिलता-जुलता है. column-reverse की वैल्यू वाली masonry-direction प्रॉपर्टी का इस्तेमाल करके, कॉलम के फ़्लो की दिशा बदलें.

सीएसएस ग्रिड वर्शन में 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, यह इनमें से कोई एक वैल्यू लेती है:

• row
• column
• row-reverse
• column-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;
}

इसके अलावा, अगर आपको साइज़ और क्षेत्र के नाम एक साथ सेट करने के लिए 'ग्रिड' का इस्तेमाल करना है, तो:

.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 पर हमें ज़रूर बताएं.