CSS Grid Lanes

• वेब पर masonry layout लागू करने के लिए नया CSS फीचर Grid Lanes Safari Technology Preview 234 में पेश किया गया है
• display: grid-lanes प्रॉपर्टी का उपयोग करके media query के बिना responsive grid बनाया जा सकता है, और grid-template-columns से लचीले columns परिभाषित किए जा सकते हैं
• item-tolerance प्रॉपर्टी के जरिए item placement की sensitivity समायोजित की जा सकती है, जिससे content size के अंतर से होने वाला visual imbalance कम होता है
• column direction और row direction दोनों का समर्थन, और grid-template-columns या grid-template-rows की परिभाषा के आधार पर flow अपने-आप तय होता है
• CSS Working Group कुछ detail property names पर चर्चा कर रहा है, और WebKit टीम standardization और implementation साथ-साथ आगे बढ़ाते हुए developers को experiment करने के लिए प्रोत्साहित कर रही है

---

CSS Grid Lanes का अवलोकन

• Grid Lanes वेब पर masonry style layout को native CSS में लागू करने के लिए एक नया display mode है
  • display: grid-lanes का उपयोग करके इसे मौजूदा grid जैसी syntax के साथ कॉन्फ़िगर किया जा सकता है
  • grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)) से न्यूनतम 250px चौड़ाई वाले लचीले columns बनाए जा सकते हैं
• gap प्रॉपर्टी से items के बीच की दूरी तय की जाती है, और media query के बिना सभी screen sizes को support किया जा सकता है
• Safari Technology Preview 234 में प्रयोग संभव है, और WebKit demo page भी उपलब्ध है

Grid Lanes कैसे काम करता है

• browser हर item को अपने-आप सबसे ऊपर के करीब वाले column में रखता है
  • Masonry.js की तरह, अगला item मौजूदा सबसे छोटे column में जोड़ा जाता है
  • tab navigation के दौरान उपयोगकर्ता इस समय दिख रही content को क्षैतिज दिशा में explore कर सकते हैं
• infinite scroll content loading के समय JavaScript के बिना भी automatic arrangement संभव है

CSS Grid की extended capabilities

• lane size में विविधता: grid-template-* syntax से संकरे और चौड़े columns को बारी-बारी से रखा जा सकता है
  • उदाहरण: grid-template-columns: repeat(auto-fill, minmax(8rem, 1fr) minmax(16rem, 2fr)) minmax(8rem, 1fr)
• item span का समर्थन
  • किसी खास item को कई columns में फैलाकर रखा जा सकता है (grid-column: span 4 आदि)
  • demo उदाहरण: newspaper article style layout
• explicit placement भी संभव
  • उदाहरण: header { grid-column: -3 / -1; } से header को आखिरी columns में स्थिर किया जा सकता है

direction switching फीचर

• column-based (waterfall) और row-based (brick) layout दोनों का समर्थन
  • grid-template-columns परिभाषित होने पर column direction, और grid-template-rows परिभाषित होने पर row direction अपने-आप सेट हो जाती है
• grid-auto-flow: normal default value है, और परिभाषित दिशा के अनुसार browser स्वतः निर्णय लेता है
• CSS Working Group flow control के लिए properties (grid-lanes-direction आदि) के naming पर चर्चा कर रहा है
  • संबंधित चर्चा GitHub CSSWG-drafts issue में चल रही है

placement sensitivity समायोजन: item-tolerance

• item-tolerance यह तय करता है कि item placement के समय size difference को कितनी सख्ती से अलग माना जाए
  • default value 1em है, और इससे छोटे अंतर को समान height माना जाता है
  • value जितनी अधिक होगी, items बाएँ-दाएँ कम खिसकेंगे, और value जितनी कम होगी, उतनी सूक्ष्म position adjustment होगी
• accessibility के लिहाज़ से tab navigation के समय visual jump को कम करने के लिए उचित value सेट करना ज़रूरी है
• property name फिलहाल item-tolerance है, लेकिन इसे flow-tolerance या pack-tolerance में बदला जा सकता है

प्रयोग और उपयोग के उदाहरण

• Safari Technology Preview 234 में कई demos उपलब्ध हैं
  • photo gallery, newspaper-style article, museum site, mega menu layout आदि
• उदाहरण कोड:

  .container {
    display: grid-lanes;
    grid-template-columns: repeat(auto-fill, minmax(max-content, 24ch));
    column-gap: 4lh;
  }
  

• images के अलावा बहुत सारे links वाले footer या menu structure में भी उपयोगी

आगे की योजना

• CSS Working Group बचे हुए property names तय करने की प्रक्रिया में है
• WebKit टीम 2022 के मध्य से implementation और standardization का काम साथ-साथ चला रही है
• developers को demo बनाने और feedback देने के लिए प्रोत्साहित किया जा रहा है
  • Jen Simmons Bluesky और Mastodon के माध्यम से राय एकत्र कर रही हैं
• बुनियादी syntax स्थिर हो चुकी है, इसलिए वास्तविक projects में लागू करने की तैयारी पूरी है

[shakespeares]

तो फिर Safari के लिए Grid-lanes और Firefox के लिए grid अलग-अलग इस्तेमाल करने पड़ेंगे न। कृपया इसे web standard के हिसाब से थोड़ा मेल बिठाइए...

[GN⁺]

Hacker News की राय

• Safari टीम के लिए तालियाँ। अक्टूबर में अचानक Interop 2025 रैंकिंग में सबसे ऊपर पहुँचना वाकई चौंकाने वाला था

  • iOS 26 के बाद महसूस हुआ कि Safari को जबरदस्त web feature updates मिले हैं। सिर्फ WebGPU ही नहीं, OPFS API के missing हिस्से भी पूरे किए गए हैं, इसलिए अब यह वास्तविक उपयोग के लायक हो गया है। साथ ही field-sizing CSS property भी जोड़ी गई है, जिससे text input box का content के हिसाब से अपने-आप बड़ा होने का मुद्दा हल हो गया
  • Safari को हर बड़े release पर “सबसे अच्छा browser” कहा जाता है, लेकिन बाकी समय इसकी काफी आलोचना होती है। मुझे लगता है ऐसा इसलिए है क्योंकि दूसरे browsers continuous updates करते हैं, जबकि Safari पारंपरिक release cycle का पालन करता है
  • सच कहें तो यह कोई हैरानी की बात नहीं है। मैं कई वर्षों से Safari टीम को लगातार नए HTML और CSS features जारी करते देख रहा हूँ
  • जब Chrome टीम WebPCIe जैसे experimental features का प्रचार कर रही थी, तब Safari वे features दे रहा था जो users वास्तव में चाहते हैं। उदाहरण के लिए blurred background effects जैसी चीज़ों को उसने काफी पहले support कर दिया था
  • फिर भी यह अफसोस की बात है कि Safari अभी तक 64-bit wasm को support नहीं करता। WebAssembly features list में “100% support” लिखा है, लेकिन वास्तव में कुछ अहम हिस्से गायब हैं

• उम्मीद है CSS Gap Decorations feature जल्दी आए। flex या grid items के बीच सुंदर borders बनाने के लिए लगातार अनावश्यक hacks इस्तेमाल करते-करते थक गया हूँ

  • table इस्तेमाल करने का सुझाव कैसा रहेगा? वह पहले से काफी बेहतर हो चुका है, लेकिन हम फिर भी और ज़्यादा चाहते रहते हैं। लगता है इंसान कभी संतुष्ट नहीं होता

• हाल की एक project में Masonry layout इस्तेमाल किया था। performance ठीक है, लेकिन यह absolute positioning पर आधारित होने की वजह से काफी hacky है। object का aspect ratio पहले से पता होना चाहिए, और resize होने पर फिर से गणना करनी पड़ती है। इसलिए native support जल्दी आने की उम्मीद है

  • मेरी भी यही भावना है। CSS के इस समस्या को हल करने का इंतज़ार करते हुए, मैं 2019 से उस दिन का इंतज़ार कर रहा हूँ जब अपनी homepage से आखिरी 1.3KB JavaScript हटा सकूँगा। यह feature बनाने वाले सभी लोगों का आभार

• ऐसी घोषणाएँ शानदार हैं, लेकिन इनमें tragic comedy जैसा एक पहलू भी है। क्योंकि Apple browser को लगातार update नहीं करता, इसलिए नई features पर वास्तव में भरोसा करके उन्हें इस्तेमाल करने का समय बहुत बाद में आता है

• Masonry layout देखने में अच्छा लगता है, लेकिन मुझे लगता है इससे पूरी images को एक नज़र में समझना मुश्किल हो जाता है

  • web “design” का बड़ा हिस्सा usability से ज़्यादा appearance पर केंद्रित है। वास्तव में product इस्तेमाल करने वाले लोग लगभग कोई नहीं होते, सब बस scroll animations देखकर “वाह” बोलते हैं
  • जब सभी images landscape हों या सभी portrait हों तो ठीक है, लेकिन mix होने पर layout बिखर जाता है

• समझ नहीं आता कि इसका नाम Masonry क्यों नहीं रखा गया। फिर भी grid-lanes नाम वर्णनात्मक है, इसलिए समझना आसान है

• सोच रहा हूँ कि LLM को इस नई CSS syntax को सटीक रूप से सीखने में कितना समय लगेगा

• अगर मुझे मनमाने आकार और स्थिति वाले text grid से बनी web page देखनी पड़े, तो उससे अच्छा है कोई मुझे गोली मार दे
  अख़बार-शैली grid demo image

  • क्या आपने कभी अख़बार नहीं पढ़ा?
  • मुझे लगता है ऐसा design अच्छा है। अख़बार की तरह असममित लेकिन कुशल layout वेब पर बनाया जा सकता है
  • लेकिन मुझे लगता है कि यह design के बुनियादी सिद्धांत alignment और grouping का उल्लंघन करता है
  • मज़ेदार बात यह है कि मुझे वह सच में बहुत शानदार लगता है
  • NYTimes.com इसका सीधा उदाहरण लगता है

• व्यक्तिगत रूप से मुझे lane layout पसंद नहीं है। list के सभी elements को क्रम से देखना मुश्किल होता है, और नज़र ऊपर-नीचे उछलती रहती है, जिससे cognitive fatigue बढ़ती है

  • लेकिन अगर सभी elements को व्यवस्थित रूप से देखने की ज़रूरत न हो, तो lane layout ठीक है। Pinterest जैसे sites के लिए, जहाँ content को एक नज़र में absorb करना होता है, यह उपयुक्त है
  • देखने में अच्छा है, लेकिन गहराई से इस्तेमाल करने पर असुविधाजनक layout है
  • इसका उद्देश्य efficiency नहीं, बल्कि सब कुछ एक नज़र में दिखाना है। जैसे अख़बार या photo gallery
  • यह विडंबना है कि जब trend खत्म होने लगता है, तभी feature आता है। UX के हिसाब से खास नहीं, लेकिन visually सुंदर है
  • इसमें right-brain design जैसा एहसास है। Pinterest या Home Assistant जैसी sites के लिए यह फिट बैठता है

• मुझे लगता है Apple को Safari को सभी platforms पर विश्वसनीय रूप से download के लिए उपलब्ध कराना चाहिए

  • मुझे याद है कि मैंने कभी Windows XP पर Safari install किया था। उस विफल प्रयास के बाद शायद अभी इतना समय नहीं बीता है
  • लेकिन परोक्ष रूप से यह संभव हो सकता है। Kagi का नया browser WebKit इस्तेमाल कर रहा है, और अभी यह सिर्फ macOS पर है, लेकिन Windows version भी eventually आने वाला है