CSS Grid Level 3, यानी "Masonry" लेआउट बनाने के लिए मदद का अनुरोध

 (webkit.org)
2 पॉइंट द्वारा GN⁺ 2024-04-24 | 1 टिप्पणियां | WhatsApp पर शेयर करें

  • CSS Grid में Masonry लेआउट (जिसे brick-stacking या waterfall लेआउट भी कहा जाता है) को CSS Grid Level 3 में जोड़ने का प्रस्ताव आगे बढ़ रहा है

    • Masonry लेआउट एक ऐसा पैटर्न है जिसमें कंटेंट को ईंटों या पत्थर की दीवार की तरह घना भरकर रखा जाता है, और अलग-अलग आकार के कंटेंट को काटे या छोड़े बिना व्यवस्थित किया जा सकता है, जबकि सामग्री कॉलम के आधार पर नीचे की ओर बहती है
    • यह ऐसा लेआउट है जिसे JavaScript के बिना केवल CSS से लागू करना कठिन रहा है

  • CSS में Masonry मेकैनिज़्म लागू करने के लिए 4 डेमो बनाए गए हैं

    • पारंपरिक Masonry/waterfall लेआउट बनाना
    • Grid की विभिन्न column definition क्षमताओं का उपयोग करना
    • Grid की column spanning क्षमता का उपयोग करना
    • Subgrid और explicit placement का उपयोग करना

  • Grid की विभिन्न क्षमताओं और Masonry को जोड़ने पर कहीं अधिक रचनात्मक और dynamic लेआउट लागू किए जा सकते हैं

    • fr unit, max-content, min-content, minmax() function आदि से लचीले और विविध column size निर्धारित करना
    • column spanning से कुछ items को उभारना या अधिक रंगीन grid बनाना
    • Subgrid से nested grid के tracks को parent के अनुरूप करना
    • explicit placement से header जैसे कुछ items की position निर्धारित करना

  • यह तर्क भी है कि Masonry लेआउट को एक अलग display type के रूप में अलग किया जाना चाहिए

    • CSS Grid और Masonry को जोड़ने से जटिलता बढ़ सकती है और performance पर नकारात्मक प्रभाव पड़ सकता है
    • Masonry को Grid से अलग करने पर दोनों क्षमताओं को स्वतंत्र रूप से विकसित किया जा सकता है
    • लेकिन यह राय भी है कि Masonry को केवल सीमित, समान-आकार column लेआउट के रूप में ही लागू किया जाए

  • मेरा मानना है कि CSS Grid में Masonry क्षमता शामिल करने के अधिक फायदे हैं

    • CSS Grid Level 3 specification पहले ही लिखी जा चुकी है और 2 browser engines में लागू भी की जा चुकी है
    • आगे चलकर Grid और Masonry, दोनों को एक जैसी नई क्षमताएं दी जा सकती हैं (उदाहरण: track styling)
    • Masonry भी Grid का ही एक प्रकार है, इसलिए वैचारिक रूप से भी यह अच्छी तरह मेल खाती है

  • वेब डिज़ाइनर और डेवलपर समुदाय से राय जानना चाहता/चाहती हूँ

    • क्या Masonry, CSS Grid का हिस्सा होना चाहिए?
    • क्या आप चाहते हैं कि Grid की सभी क्षमताएं—जैसे विभिन्न column size definitions, column spanning, placement, Subgrid आदि—उपलब्ध हों? या केवल समान-आकार columns का समर्थन बेहतर है?
    • आप इस सुविधा का उपयोग कैसे करेंगे? किस तरह के लेआउट बनाए जा सकते हैं?
    • अगर आपने खुद कोई डेमो बनाया है, तो कृपया साझा करें
    • क्या ऐसे लेआउट हैं जिन्हें इस मॉडल से लागू करना कठिन है?

  • संभव है कि Masonry नाम उपयुक्त न हो। rows को हटाने के अर्थ में grid-template-rows: off जैसी syntax पर विचार किया जा सकता है। कृपया ध्यान रखें कि भविष्य में इसका नाम बदल सकता है

GN⁺ की राय

  • CSS Grid में Masonry क्षमता जोड़ना वेब लेआउट की अभिव्यक्ति-क्षमता को काफी बढ़ा सकने वाला एक सार्थक बदलाव लगता है। खासकर केवल column दिशा में व्यवस्थित होने वाले columnar grids को आसानी से लागू कर पाना आकर्षक है
  • दूसरी ओर, Masonry को एक अलग display type के रूप में अलग करने और उसकी क्षमताओं को सीमित करने वाले तर्क से सहमत होना कठिन है। उल्टा, Grid की शक्तिशाली क्षमताओं के साथ मिलकर Masonry लेआउट का उपयोग-क्षेत्र और व्यापक हो सकता है
  • हालांकि Masonry नाम बहुत intuitive नहीं है और भ्रम पैदा कर सकता है, इसलिए column-only grid को दर्शाने के लिए किसी दूसरे नाम पर विचार करना बेहतर हो सकता है। grid-template-rows: none जैसी syntax, जो 'rows रहित grid' का अर्थ अधिक स्पष्ट रूप से दे, शायद बेहतर होगी
  • उम्मीद है कि यह प्रस्ताव CSS Grid को और अधिक शक्तिशाली टूल बना सकता है। विभिन्न लेआउट उदाहरणों के साथ प्रयोग करना और सक्रिय रूप से राय देना महत्वपूर्ण होगा

संबंधित पढ़ाई

1 टिप्पणियां

 
GN⁺ 2024-04-24
Hacker News राय

सारांश:

  • CSSWG और browser vendors की DevRel टीम 2020 से इस पर चर्चा कर रही हैं कि Masonry layout को CSS में आधिकारिक रूप से कैसे शामिल किया जाए
    • WebKit टीम ने इस चर्चा को सार्वजनिक बनाने और designers व developers से राय लेने का फैसला किया
    • यह एक महत्वपूर्ण precedent होगा, और इस बात पर बुनियादी बहस है कि क्या सभी layout options को CSS Grid का हिस्सा माना जाए या ज़रूरत के अनुसार नए CSS Display properties जोड़ते रहना चाहिए
  • Masonry layout की तुलना ईंटें लगाने से करना मज़ेदार है, लेकिन असली ईंटों को इस तरह लगाना structural engineering के लिहाज़ से आपदा होगा
  • Megamenu demo, Masonry layout के अनुचित उपयोग का उदाहरण है, जो reading flow को बिगाड़ देता है और उम्मीदों को गंभीर रूप से तोड़ता है
    • visual impairment वाले users हमेशा "गलत" क्रम में पढ़ेंगे
    • इसे break-inside: avoid का उपयोग करके columns के रूप में लागू किया जाना चाहिए था
  • newspaper demo भी मिलते-जुलते कारणों से थोड़ा संदिग्ध है
  • स्वतंत्र blocks में मौजूद images या media के लिए Masonry layout बेहतर काम करता है
  • ये demos grid layout पर आधारित हैं, इसलिए जिन browsers में support नहीं है वहाँ भी ये एक उचित fixed-row format में दिखाई देते हैं
  • Masonry/Waterfall layout का कुल मिलाकर एहसास पसंद आता है
    • लेकिन default Masonry alignment के बजाय ऐसा layout हो तो अच्छा होगा जो बाएँ-से-दाएँ reading flow को ज़्यादा बनाए रखे
  • CSS की जगह लेने वाली layout system को कैसे design किया जाए, इस पर विचार
    • Qt, Tk, SwiftUI जैसे वास्तव में लागू systems में क्या कुछ बेहतर है, यह जानने की उत्सुकता है
    • developers को बेहतर interface देने के लिए क्या करना चाहिए?
  • अपनी photo website पर JS के बिना Masonry effect लागू करने का एक उदाहरण साझा किया गया
    • display:inline-block का उपयोग करके photos को text की तरह treat किया गया ताकि वे नई पंक्ति में reflow हों
    • Masonry libraries की तुलना में परिणाम अधिक संतोषजनक था
  • पहले से Flexbox और Grid layout मौजूद होने के बावजूद, CSS में और अधिक "layout" options जोड़ना सही है या नहीं, इस पर सवाल है
    • एक जटिल लेकिन अंततः final constraint-based system बनाना, जो सभी layout cases को संभाल सके, शायद बेहतर समाधान हो सकता है
  • WebKit टीम को फिर से सार्वजनिक रूप से शानदार काम करते देखना अच्छा लगता है