ईंट-ईंट से सब बनता है: सीएसएस मेसनरी बनाने में हमारी मदद करें

Patrick Brosset

Alison Maher

पब्लिश होने की तारीख: 23 जुलाई, 2025

Microsoft Edge और Google Chrome की टीमों को यह बताते हुए खुशी हो रही है कि सीएसएस मेसनरी, डेवलपर के लिए उपलब्ध है. इसे Chrome और Edge 140 से टेस्ट किया जा सकता है.

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

Chromium में आज ही सीएसएस मैसनरी की जांच करें

सीएसएस मैसनरी को आज़माने के लिए:

1. Chrome या Edge 140 या इसके बाद के वर्शन का इस्तेमाल करें. इसके अलावा, Chromium पर आधारित किसी ऐसे ब्राउज़र का इस्तेमाल करें जिसका वर्शन, Chrome या Edge के वर्शन से मेल खाता हो.
2. नए टैब में about:flags पर जाएं.
3. "सीएसएस मेसनरी लेआउट" खोजें.
4. फ़्लैग चालू करें.
5. ब्राउज़र को रीस्टार्ट करें.

इस सुविधा को चालू करने के बाद, इसे ऐक्शन में देखने के लिए, Microsoft Edge के डेमो देखें (डेमो का सोर्स कोड देखें). इसके अलावा, इस सुविधा और उपलब्ध सिंटैक्स के बारे में ज़्यादा जानने के लिए, पढ़ना जारी रखें.

मेसनरी क्या है?

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

सीएसएस मेसनरी का इस्तेमाल, आइटम को कॉलम या लाइन के फ़ॉर्मैट में व्यवस्थित करने के लिए किया जा सकता है. इसमें आइटम को उन कॉलम या लाइनों में छोटा करके रखा जाता है.

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

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

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

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

विज्ञापन अपने-आप प्लेस होने की सुविधा से, बहुत दिलचस्प नतीजे मिल सकते हैं. वेब डिज़ाइनर लंबे समय से ऐसे नतीजे पाने की कोशिश कर रहे हैं. उदाहरण के लिए, New York City की फ़ोटो गैलरी का डेमो देखें. इसमें दिखाया गया है कि फ़ोटो को कई कॉलम में कॉम्पैक्ट तरीके से कैसे दिखाया जा सकता है. साथ ही, कुछ आइटम (इस उदाहरण में टाइटल) को कई कॉलम में दिखाने की अनुमति दी गई है:

यहां कुछ अन्य उदाहरण दिए गए हैं कि मेसनरी लेआउट का इस्तेमाल किन कामों के लिए किया जा सकता है.

ब्लॉग का लेआउट, जिसमें हर पोस्ट का थंबनेल और ब्यौरा दिखाया गया है.

यह एक समाचार साइट है, जहां लेख कॉलम में दिखते हैं. इनमें से कुछ लेख, दूसरों की तुलना में ज़्यादा चौड़े हैं. साथ ही, हीरो इमेज पूरे पेज की चौड़ाई में फैली हुई हैं.

फ़ोटो का एक कलेक्शन, जिसमें कॉलम के अलग-अलग साइज़ हैं. साथ ही, कुछ फ़ोटो एक से ज़्यादा कॉलम में फैली हुई हैं.

समस्या हल करने के तरीके और उनकी सीमाएं

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

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

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

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

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

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

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

सीएसएस मेसनरी की स्थिति

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

display: masonry का इस्तेमाल करें

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

display: grid; grid-template-*: masonry;

इस सिंटैक्स में, सीएसएस मेसनरी को सीधे तौर पर सीएसएस ग्रिड में इंटिग्रेट किया जाता है. मेसनरी मोड को ट्रिगर करने के लिए, लाइन पर आधारित मेसनरी लेआउट के मामले में grid-template-columns की परिभाषा में masonry कीवर्ड लागू करें. इसके अलावा, कॉलम पर आधारित मेसनरी लेआउट के मामले में grid-template-rows की परिभाषा में masonry कीवर्ड लागू करें.

इस प्रस्ताव और इसके पीछे की वजह के बारे में ज़्यादा जानकारी, WebKit की इस पोस्ट में देखी जा सकती है: CSS में मेसनरी के लिए फ़ाइनल सिंटैक्स चुनने में हमारी मदद करें.

ध्यान दें कि इस प्रस्ताव के बजाय, item-pack प्रॉपर्टी और collapse कीवर्ड का इस्तेमाल किया जा सकता है. इससे, ग्रिड टेंप्लेट की दो प्रॉपर्टी में से किसी एक का इस्तेमाल करने के बजाय, सीएसएस मेसनरी ट्रिगर हो जाएगी.

Chrome और WebKit टीमों की ओर से पोस्ट पब्लिश किए जाने के बाद, CSSWG ने आगे बढ़ने के लिए, पूरे सिंटैक्स पर चर्चा जारी रखी है. आपके सुझाव, शिकायत या राय से, इन फ़ोरम को बेहतर बनाने में मदद मिल सकती है.

चर्चाओं की मौजूदा स्थिति के बारे में ज़्यादा जानने के लिए, समस्या 11593 देखें. इसमें मेसनरी सिंटैक्स के बारे में चर्चा के मौजूदा विषयों की जानकारी दी गई है. साथ ही, सिंटैक्स के बारे में अब तक हुई बहस की खास जानकारी के लिए, समस्या 11243 देखें.

अपना सीएसएस मेसनरी लेआउट बनाना

आइए, कुछ मज़ेदार काम करते हैं और सीएसएस मेसनरी लेआउट बनाते हैं.

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

मेसनरी कंटेनर बनाना

कॉलम पर आधारित पहला मेसनरी कंटेनर बनाने के लिए, display:masonry का इस्तेमाल करें. साथ ही, grid-template-columns का इस्तेमाल करके अपने कॉलम के साइज़ तय करें. masonry-direction डिफ़ॉल्ट रूप से column पर सेट होता है. इसलिए, इस प्रॉपर्टी को सेट करना ज़रूरी नहीं है.

.masonry {
  display: masonry;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 10px;
}

इसके बजाय, लाइन पर आधारित मेसनरी कंटेनर के लिए display:masonry का इस्तेमाल करें. इसके बाद, grid-template-rows का इस्तेमाल करके लाइन के साइज़ तय करें. इसके बाद, masonry-direction:row सेट करें.

.masonry {
 display: masonry;
 masonry-direction: row;
 grid-template-rows: repeat(auto-fit, minmax(160px, 1fr));
 gap: 10px;
}

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

इससे लेआउट टाइप के बीच प्रॉपर्टी को ज़्यादा बार इस्तेमाल किया जा सकता है. हालांकि, आपको यह मुश्किल लग सकता है. इस बारे में हमें बताएं. हम grid-template-columns और grid-template-rows जैसी प्रॉपर्टी के लिए, ज़्यादा सामान्य एलियास बनाने पर विचार कर सकते हैं. जैसे, template-columns या template-rows. इनका इस्तेमाल ग्रिड और मेसनरी, दोनों के लिए किया जा सकता है.

ट्रैक के डिफ़ॉल्ट साइज़ का इस्तेमाल करना

डिसप्ले टाइप के नए विकल्प के साथ, प्रॉपर्टी के डिफ़ॉल्ट विकल्पों पर फिर से विचार करने का मौका मिलता है.

ग्रिड में, grid-template-columns और grid-template-rows डिफ़ॉल्ट रूप से none पर सेट होते हैं जिससे आम तौर पर, एक कॉलम या लाइन मिलती है. मेसनरी के लिए, इस डिफ़ॉल्ट वैल्यू से अक्सर ऐसा लेआउट मिलता है जो आपकी ज़रूरत के मुताबिक नहीं होता.

Chromium में लागू करने पर, none के लिए सुझाई गई नई डेफ़िनिशन जोड़ी जाती है. यह सीएसएस मेसनरी में डिफ़ॉल्ट ट्रैक साइज़ की जगह ले लेगी. ट्रैक के नए डिफ़ॉल्ट साइज़ की वैल्यू repeat(auto-fill, auto) है. इस वैल्यू से, ट्रैक के साइज़ तय किए बिना ही एक अच्छा मेसनरी लेआउट बनाया जा सकता है:

.masonry {
  display: masonry;
  gap: 10px;
}

इमेज में दिखाया गया है कि मेसनरी कंटेनर, उपलब्ध जगह के हिसाब से अपने-आप साइज़ बदलने वाले कॉलम बनाता है.

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

masonry शॉर्टहैंड प्रॉपर्टी आज़माएं

जैसा कि पहले बताया गया है, Chromium में मौजूदा तौर पर लागू की गई सुविधा, लेआउट में मेसनरी ट्रैक तय करने के लिए grid-template-* प्रॉपर्टी पर निर्भर करती है. हालांकि, मेसनरी में सिर्फ़ एक डाइमेंशन होता है. इसलिए, हमने masonry शॉर्टहैंड प्रॉपर्टी भी लागू की है. इसका इस्तेमाल करके, मेसनरी की दिशा और ट्रैक की परिभाषा, दोनों को एक साथ तय किया जा सकता है. इसके लिए, grid- प्रीफ़िक्स वाली प्रॉपर्टी का इस्तेमाल करने की ज़रूरत नहीं होती.

उदाहरण के लिए, यहां दिए गए दो कोड स्निपेट, एक जैसे सीएसएस मेसनरी कंटेनर बनाएंगे.

.masonry {
 display: masonry;
 masonry: "a a b" 50px 100px 200px row;
}

.masonry {
  display: masonry;
  masonry-direction: row;
  grid-template-rows: 50px 100px 200px;
  grid-template-areas: "a" "a" "b"
}

सीएसएस वर्किंग ग्रुप, masonry शॉर्टहैंड पर अब भीचर्चा कर रहा है. इसे आज़माएं और हमें बताएं कि आपको यह कैसा लगा.

कस्टम ट्रैक साइज़ का इस्तेमाल करना

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

.masonry {
 display: masonry;
 masonry: repeat(2, 3rem) repeat(auto-fit, 5rem) 12rem;
}

इस उदाहरण में, हम पहले 3rem के दो ट्रैक तय कर रहे हैं. इसके बाद, 5rem के अलग-अलग ट्रैक तय किए जा रहे हैं. इसके बाद, 12rem का एक ट्रैक तय किया जा रहा है.

एक से ज़्यादा ट्रैक पर फैला हो

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

उदाहरण के लिए:

.masonry {
  display: masonry;
  masonry: repeat(auto-fill, minmax(12rem, 1fr));
}

.important-item {
  grid-column: span 2;
}

इस सुविधा का इस्तेमाल, एक से ज़्यादा ट्रैक में फैले हुए आइटम को कंटेनर की पूरी लंबाई में दिखाने के लिए भी किया जा सकता है:

.masonry {
 display: masonry;
 masonry: repeat(auto-fill, minmax(12rem, 1fr));
}

.full-bleed {
 grid-column: 1 / -1;
}

यह वही कुकी है जिसका इस्तेमाल, समाचार वाली साइट के डेमो में किया जाता है. इससे लेखों में सदस्यता का विज्ञापन दिखाया जाता है.

मेसनरी आइटम प्लेसमेंट को फ़ाइन ट्यून करना

सीएसएस मेसनरी में, आइटम को उस कॉलम या लाइन में रखा जाता है जिसकी रनिंग पोज़िशन सबसे कम होती है.

मान लें कि दो कॉलम वाला मेसनरी कंटेनर है. अगर कंटेनर में पहले कॉलम में 110 पिक्सल ऊँचाई वाला आइटम और दूसरे कॉलम में 100 पिक्सल ऊँचाई वाला आइटम है, तो तीसरा आइटम दूसरे कॉलम में रखा जाएगा. यहाँ यह आइटम, मेसनरी लेआउट की शुरुआत से 10 पिक्सल की दूरी पर होगा.

अगर आपको लगता है कि रनिंग पोज़िशन में 10 पिक्सल का अंतर आपके मामले के लिए काफ़ी कम है और आपको तीसरे आइटम को पहले कॉलम में रखना है, ताकि सोर्स ऑर्डर से बेहतर तरीके से मैच किया जा सके, तो item-tolerance प्रॉपर्टी का इस्तेमाल करें.

नई item-tolerance प्रॉपर्टी, आइटम प्लेसमेंट में संवेदनशीलता को कंट्रोल करती है.

ऊपर दिए गए उदाहरण में, आइटम प्लेसमेंट में बदलाव करने के लिए, अपने कंटेनर में item-tolerance: 10px; लागू किया जा सकता है:

.masonry {
  display: masonry;
  masonry: 200px 200px;
  gap: 10px;
  item-tolerance: 10px;
}

ध्यान दें कि ड्राफ़्ट स्पेसिफ़िकेशन में इस प्रॉपर्टी को item-slack कहा गया है. सीएसएस वर्किंग ग्रुप ने हाल ही में, item-tolerance को नाम के तौर पर इस्तेमाल करने का फ़ैसला किया है. साथ ही, स्पेसिफ़िकेशन को जल्द ही अपडेट किया जाएगा.

अन्य उपलब्ध प्रॉपर्टी

सीएसएस ग्रिड की तरह ही, मेसनरी कंटेनर के ग्रिड ऐक्सिस में मौजूद आइटम का साइज़ बदलने और उन्हें जगह पर रखने के लिए, टेंप्लेट के साइज़ और प्लेसमेंट की प्रॉपर्टी का इस्तेमाल किया जा सकता है. जैसे, grid-row, grid-column, grid-area, grid-template-areas या order. मेसनरी लेआउट बनाते समय, सीएसएस ग्रिड की सभी सुविधाओं का इस्तेमाल करें.

सुझाव, शिकायत या राय देने के लिए कॉल करें

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

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

अगर आपको एपीआई के बारे में कोई सुझाव/राय देनी है या कोई शिकायत करनी है, तो समस्या 11243 पर टिप्पणी करके हमें बताएं. इसके अलावा, अगर आपको अपने ब्लॉग या सोशल मीडिया पर कोई पोस्ट लिखनी है, तो हमें X या LinkedIn पर ज़रूर बताएं.

Chromium में CSS मेसनरी को अब भी लागू किया जा रहा है. अगर आपको इसे आज़माना है, तो ध्यान रखें कि हम अब भी इस पर काम कर रहे हैं. ऐसा हो सकता है कि यह आपकी उम्मीद के मुताबिक काम न करे. फ़िलहाल, कुछ सीमाएं हैं. जैसे, डेंस पैकिंग, रिवर्स प्लेसमेंट, सबग्रिड सपोर्ट, आउट-ऑफ़-फ़्लो सपोर्ट, बेसलाइन सपोर्ट, DevTools सपोर्ट, फ़्रैगमेंटेशन सपोर्ट, गैप डेकोरेशन सपोर्ट वगैरह.

अगर आपको इस सुविधा को आज़माते समय कोई गड़बड़ी मिलती है, तो Chromium में नई गड़बड़ी की जानकारी देकर अपना सुझाव/राय दें या शिकायत करें.