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

Patrick Brosset

Alison Maher

पब्लिश करने की तारीख: 23 जुलाई, 2025, पिछली बार अपडेट किए जाने की तारीख: 13 फ़रवरी, 2026

चेतावनी: पुराना सिंटैक्स: इस पोस्ट में दिए गए कोड सैंपल, "ग्रिड लेन लेआउट" के शुरुआती ड्राफ़्ट पर आधारित हैं. सिंटैक्स के नए वर्शन के लिए, css-grid-3 स्पेसिफ़िकेशन देखें.

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 में नई गड़बड़ी की जानकारी देकर, अपने सुझाव/राय दें या शिकायत करें.