ग्रिड सिस्टम: एक डिज़ाइनर की गाइड

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

स्विस स्कूल ने साठ साल पहले प्रिंट में यह साबित कर दिया था। Müller-Brockmann, Hofmann, Ruder, डिज़ाइनरों की पूरी एक पीढ़ी, जिसने ग्रिड को लेआउट का शॉर्टकट नहीं, सोचने का औज़ार माना। यह सबक डिज़ाइन थ्योरी के लगभग हर दूसरे हिस्से से बेहतर उम्र जी गया। आज का हर प्रोडक्ट ग्रिड, Linear से Stripe और New York Times तक, उसी एक विचार की संतान है। यह 2026 में ग्रिड के लिए काम का संदर्भ है।

Müller-Brockmann ने आधुनिक ग्रिड को उसका व्याकरण दिया

Josef Müller-Brockmann की 1981 की किताब "Grid Systems in Graphic Design" आज भी इस विधा की रीढ़ है। उस किताब से पहले ग्रिड मौजूद थे, पर शब्दावली नहीं थी। उसके बाद डिज़ाइनरों के पास कॉलम, गटर, मार्जिन और मॉड्यूल की साझा भाषा थी, जो स्टूडियो, स्कूलों और दशकों के पार चली।

स्विस स्कूल ग्रिड को कॉन्स्ट्रेंट इंजन मानता था। एक सिस्टम चुनो, उस पर टिके रहो, और बदलाव कंटेंट से आने दो, इम्प्रोवाइज़ेशन से नहीं। Zurich Tonhalle के लिए Müller-Brockmann के पोस्टर 2026 के प्रोडक्ट UI स्क्रीनशॉट जैसे दिखते हैं, क्योंकि वे वही लॉजिक चला रहे हैं।

निश्चित ग्रिड पर दमदार टाइप। व्हाइटस्पेस बचा-खुचा खाली स्थान नहीं, बल्कि संरचना का हिस्सा। यही लॉजिक आज 2026 में हर SaaS एक जैसा क्यों दिखता है जैसे लेखों में दिखता है, जहाँ एकरूपता दरअसल ग्रिड की जीत है, जो फिर अपनी धार खो देती है।

वेब को यह व्याकरण धीरे-धीरे मिला। CSS ने पहले floats दिए, फिर Flexbox, और आख़िर में CSS Grid। हर कदम ने उस फ़ासले को घटाया जो 1961 के प्रिंट डिज़ाइनर और ब्राउज़र में काम करने वाले फ्रंट-एंड डिज़ाइनर के बीच था।

शब्दावली नहीं बदली। कॉलम आज भी कॉलम हैं। बस औज़ार पकड़ में आ गए।

ग्रिड क्यों काम करते हैं, एक पैराग्राफ़ में

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

ग्रिड के बिना हर लेआउट फ़ैसला नया होता है। हेडिंग कहाँ बैठे, इमेज कहाँ रुके, बॉडी कितनी चौड़ी हो, साइडबार मुख्य कॉलम से कैसे जुड़े। ग्रिड के साथ ये जवाब पहले से तय होते हैं।

डिज़ाइनर अपना ध्यान हायरार्की और कंटेंट पर लगाता है, हर ब्लॉक दोबारा नापने पर नहीं। यूज़र अपना ध्यान संदेश पर लगाता है, संरचना डिकोड करने पर नहीं। पूरा सौदा बस यही है।

पाँच ग्रिड प्रकार, एक जगह

ज़्यादातर टीमें "ग्रिड" को एक फ़ैसला मानती हैं। यह पाँच हैं। हर एक अलग लेआउट समस्या हल करता है और अलग वजह से फेल होता है। ग़लत चुना तो पेज हमेशा आपसे लड़ेगा।

यह टेबल बुकमार्क करने लायक है। लेआउट पर ज़्यादातर बहसें उसी पल ख़त्म हो जाती हैं जब टीम तय कर लेती है कि वह इन पाँच में से कौन-सा चला रही है।

Column ग्रिड असली वर्कहॉर्स है

वेब पर आप जो भी शिप करते हैं, उसके लगभग हर हिस्से के लिए column ग्रिड डिफ़ॉल्ट है। खड़े कॉलम, तय गटर, वैकल्पिक मार्जिन। कंटेंट कॉलम में बहता है, लेआउट ब्लॉक एक या ज़्यादा कॉलम घेरते हैं, और रिदम इससे तय होती है कि कैनवास कितने कॉलम में बँटा है।

Stripe पूरे मार्केटिंग सरफ़ेस पर 12-कॉलम ग्रिड चलाता है। Linear का ऐप शेल एक column ग्रिड पर बना है जो मोबाइल पर एक रेल में सिमट जाता है और डेस्कटॉप पर साइडबार प्लस मुख्य कॉलम में फैल जाता है। Vercel के मार्केटिंग पेज सोचे-समझे नेगेटिव स्पेस के साथ 12-कॉलम ग्रिड इस्तेमाल करते हैं। डैशबोर्ड की प्राइसिंग मैट्रिक्स या डिप्लॉय लॉग लेआउट पर आँखें सिकोड़ें तो कॉलम दिख जाते हैं। जो ग्रिड 1961 में पोस्टर चलाता था, वही 2026 में मार्केटिंग साइटें चलाता है, बस नीचे media queries के साथ।

Column ग्रिड तभी छोड़ें जब लेआउट मूल रूप से आयताकार न हो, जो वेब पर लगभग कभी नहीं होता। 2026 का मार्केटिंग साइट स्टैक उन फ्रेमवर्क विकल्पों को कवर करता है जो इस ग्रिड के ऊपर बैठते हैं।

Modular ग्रिड एडिटोरियल घनत्व के लिए है

Modular ग्रिड कैनवास को दोनों दिशाओं में, कॉलम और रो, सेल में बाँटता है। यह ग्राफ़ पेपर जैसा दिखता है और वैसा ही बर्ताव करता है। लेआउट ब्लॉक सेल की सीमाओं पर स्नैप होते हैं, और घनत्व हादसा नहीं, डिज़ाइन का लीवर बन जाता है।

New York Times का होमपेज वेब पर modular ग्रिड का मानक उदाहरण है। हेडलाइन, फ़ोटो, सारांश और विज्ञापन सब ऐसे सेल में बैठते हैं जिनकी चौड़ाई और ऊँचाई एक जैसी रहती है, भले ही ऊपर से कंपोज़िशन विविध दिखे। Bloomberg Terminal modular ग्रिड को चरम पर ले जाता है, जहाँ सेल का सख़्त अनुशासन न हो तो सूचना का घनत्व ढह जाए। Notion का गैलरी व्यू नरम modular ग्रिड देता है, जहाँ कार्ड तय सेल चौड़ाई पर स्नैप होते हैं और कंटेंट अंदर ढल जाता है।

Modular ग्रिड तब इस्तेमाल करें जब पेज पर कई छोटी, तुलनीय इकाइयाँ हों जिन्हें एक सिस्टम की तरह पढ़ा जाना है। जब कंटेंट एक-दो बड़े ब्लॉक हो, तब इसे छोड़ दें, क्योंकि वहाँ column ग्रिड कम तामझाम में वही काम कर देता है। दो कार्ड चलाने वाला modular ग्रिड कॉस्ट्यूम पहने column ग्रिड जैसा दिखता है।

Baseline ग्रिड रिदम इंजन है

Baseline ग्रिड एक क्षैतिज ग्रिड है जो वर्टिकल रिदम को नियंत्रित करता है। टेक्स्ट की हर लाइन एक baseline रूल पर बैठती है, हर हेडिंग उस रूल के गुणज पर उतरती है, और पेज एक शांत संगीतमय लय के साथ पढ़ा जाता है, जिसे यूज़र महसूस करता है पर नाम नहीं दे पाता।

Apple के मार्केटिंग पेज सख़्त baseline ग्रिड चलाते हैं। कोई भी प्रोडक्ट पेज खोलिए और देखिए कि हेडलाइन, सबहेड, इमेज और बॉडी कॉपी सब एक साझा वर्टिकल रिदम में हैं। Medium अपने लॉन्ग-फ़ॉर्म टेम्पलेट पर baseline अलाइनमेंट देता है, इसीलिए 4000 शब्दों का निबंध भी आराम से पढ़ा जाता है। प्रकाशन शाखा Stripe Press हर उस पेज पर baseline रिदम चलाती है जो वे छापते हैं और जो वेब पर प्रकाशित करते हैं।

वेब का गणित सरल है। एक बेस यूनिट चुनिए, आमतौर पर 8 पिक्सेल। बॉडी line-height को उसका गुणज रखिए, आमतौर पर 24 पिक्सेल, जो 16 पिक्सेल बॉडी टाइप का 1.5 गुना है।

हेडिंग भी गुणजों पर उतरती हैं, इसलिए 56 पिक्सेल line-height वाला 48 पिक्सेल का H1 भी उसी रिदम पर स्नैप होता है। पूरा पेज एक ही बीट पर गुनगुनाता है।

Hierarchical ग्रिड पढ़ने के क्रम के लिए है

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

Apple के प्रोडक्ट लॉन्च पेज असल दुनिया के hierarchical ग्रिड हैं। हीरो एलिमेंट को असमान रूप से ज़्यादा जगह मिलती है, द्वितीयक कंटेंट कसे हुए गुच्छों में बैठता है, और तृतीयक कंटेंट अंत के पास एक संकरे कॉलम में रहता है। New York Times के बड़े फ़ीचर, लंबे स्क्रॉल वाले मल्टीमीडिया पीस, दृश्य दर दृश्य डिज़ाइन किए गए hierarchical ग्रिड हैं। Anthropic का होमपेज ऐसा hierarchical ग्रिड चलाता है जहाँ एक कथन हावी रहता है और बाकी सब सहायता के आकार का है।

Hierarchical ग्रिड वह प्रकार है जो सबसे ज़्यादा एडिटोरियल विवेक माँगता है। ये तब फेल होते हैं जब डिज़ाइनर इन्हें column या modular ग्रिड के अनुशासन से बचने का बहाना बना लेते हैं। Hierarchical ग्रिड "बिना ग्रिड" नहीं है। यह ऐसा ग्रिड है जहाँ प्राथमिकताएँ ज्यामिति तय करती हैं।

अगर आपकी हायरार्की ग़लत है, तो ग्रिड ग़लत है। प्राथमिकता का गहरा तर्क विज़ुअल हायरार्की डिज़ाइन में है।

Manuscript ग्रिड लंबे पाठ के लिए है

Manuscript ग्रिड एक कॉलम है। बस यही पूरा ग्रिड है। पेज पर नीचे चलता टेक्स्ट का एक ब्लॉक, सोचे-समझे मार्जिन, सधी हुई measure, और आँख के लिए कोई और प्रतिस्पर्धी नहीं।

Stripe Press की किताबें कागज़ पर manuscript ग्रिड हैं। Notion के doc पेज ब्राउज़र में manuscript ग्रिड हैं। Substack का रीडर व्यू, Apple Newsroom की लॉन्ग-रीड, सिंगल-कॉलम मोड में New York Times Magazine के पीस, सब यही ग्रिड चला रहे हैं। किताब पाँच सदियों से जानती है कि लंबा पाठ कैसे परोसा जाए। वेब तब पकड़ में आया जब हमने 4000 शब्दों के निबंध के बगल में साइडबार रखने की कोशिश छोड़ दी।

बाध्यता measure यानी लाइन की लंबाई है। 65 से 75 अक्षर का लक्ष्य रखें। इससे चौड़ी हुई तो लौटते समय आँख लाइन खो देती है। इससे संकरी हुई तो रिदम टूट-टूटकर चलती है।

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

12-कॉलम सिस्टम आधुनिक वेब चलाता है

12-कॉलम ग्रिड डिफ़ॉल्ट इसलिए है कि 12 सबसे ज़्यादा विभाज्य छोटी संख्या है। यह 1, 2, 3, 4, 6 और 12 में साफ़ बँट जाती है। इससे मार्केटिंग साइट या प्रोडक्ट UI की लगभग हर लेआउट ज़रूरत भिन्नों का सहारा लिए बिना पूरी हो जाती है।

Bootstrap ने 2011 में वेब के लिए 12-कॉलम ग्रिड को संहिताबद्ध किया और इस चुनाव पर उसे कभी माफ़ी नहीं माँगनी पड़ी। Tailwind की grid utilities डिफ़ॉल्ट रूप से 12 कॉलम देती हैं। Material Design का रिस्पॉन्सिव ग्रिड, Carbon Design का ग्रिड, Shopify का Polaris, सब 12-कॉलम हैं। यह चुनाव संयोग नहीं, गणित है।

ये रहा 12-कॉलम फ़ील्ड गाइड जिसे ज़्यादातर टीमें या तो इस्तेमाल करती हैं या बुरी तरह दोबारा गढ़ती हैं:

• 12 फ़ुल-विड्थ हीरो, बैनर, फ़ुटर, किनारे से किनारे तक कंटेंट
• 8 + 4 साइडबार के साथ मुख्य कंटेंट, मानक प्रोडक्ट ऐप शेल
• 6 + 6 दो-दो कंटेंट ब्लॉक, मार्केटिंग फ़ीचर रो, तुलना सेक्शन
• 4 + 4 + 4 तीन-तीन कार्ड, प्राइसिंग टियर, तीन-कॉलम फ़ीचर ग्रिड
• 3 + 3 + 3 + 3 चार-चार लोगो, टीम ग्रिड, इमेज गैलरी
• 9 + 3 पतले मेटा कॉलम के साथ कंटेंट, एडिटोरियल लेआउट में आम
• 2 + 8 + 2 साँस लेने की जगह के साथ केंद्रित कंटेंट, मार्केटिंग डिटेल पेज पर इस्तेमाल

ये पैटर्न शुरू में ही पक्के कर लीजिए तो टीम डिज़ाइन रिव्यू में लेआउट पर बहस करना बंद कर देती है। पैटर्न स्पैन चुनता है, स्पैन गणित चुनता है, गणित पेज शिप करता है। आपको डिज़ाइन सिस्टम की ज़रूरत नहीं में आगे जो तर्क है, उसका एक हिस्सा यही है कि कसा हुआ ग्रिड वह ज़्यादातर काम कर देता है जिसका दावा डिज़ाइन सिस्टम करता है।

स्क्रीन पर baseline रिदम, सिर्फ़ कागज़ पर नहीं

Baseline अलाइनमेंट ग्रिड थ्योरी का वह हिस्सा है जिसे ज़्यादातर टीमें वेब पर छोड़ देती हैं, क्योंकि ब्राउज़र इसे लागू नहीं करवाता। इसे छोड़ दीजिए तो पेज ऐसी वजहों से झटकेदार लगता है जिनका नाम यूज़र नहीं ले पाता। इसे थामे रखिए तो पेज तैयार प्रोडक्ट जैसा लगता है।

तरकीब यह है कि पिक्सेल में नहीं, वर्टिकल यूनिट में सोचें। 8-पिक्सेल बेस चुनिए। सारी padding, margin, line-height और कॉम्पोनेंट की ऊँचाई 8 के गुणज हो जाती है।

24 पिक्सेल line-height वाली 16 पिक्सेल बॉडी कॉपी रिदम पर स्नैप होती है। 56 पिक्सेल line-height वाला 48 पिक्सेल का H1 स्नैप होता है। 24 पिक्सेल की कार्ड padding स्नैप होती है। 96 पिक्सेल की सेक्शन स्पेसिंग स्नैप होती है। पूरा पेज एक ही सुर में सधा एक वाद्य बन जाता है, और आँख बिना किसी अटकाव के उसमें घूम सकती है।

Linear इश्यू लिस्ट में baseline रिदम देता है। Notion इसे doc रीडर में देता है। Figma का Slides प्रोडक्ट स्लाइड थंबनेल और एडिटर कैनवास, दोनों में रिदम थामे रखता है। रिदम थामने वाली टीमें अक्सर वही होती हैं जो टाइप को सिस्टम मानती हैं, स्टाइलशीट ओवरराइड नहीं।

घबराहट के बिना रिस्पॉन्सिव ग्रिड

रिस्पॉन्सिव ग्रिड वही ग्रिड है जो अलग-अलग चौड़ाइयों पर चल रहा है। यह हर ब्रेकपॉइंट पर अलग डिज़ाइन नहीं है, बल्कि वही कंपोज़िशन है जो व्यूपोर्ट सिकुड़ने पर समझदारी से सिमटती है।

मानक तरीका है डेस्कटॉप पर 12-कॉलम ग्रिड, टैबलेट पर 8 कॉलम, मोबाइल पर 4 कॉलम। डेस्कटॉप पर 4 + 8 लेआउट टैबलेट पर 4 + 4 और मोबाइल पर एक कॉलम बन जाता है। 3 + 3 + 3 + 3 वाला चार-चार लेआउट टैबलेट पर 4 + 4 (दो-दो की दो पंक्तियाँ) और मोबाइल पर 4 + 4 + 4 + 4 (चार एक के ऊपर एक) बन जाता है। गणित सुसंगत रहता है क्योंकि कॉलम की संख्या साफ़ भिन्नों में घटती है।

Stripe की साइट प्रोडक्शन में रिस्पॉन्सिव ग्रिड की पाठ्यपुस्तक है। Linear के मार्केटिंग पेज तीन ब्रेकपॉइंट से बिना किसी दबे-सिकुड़े लेआउट के रीफ़्लो होते हैं। Vercel की प्राइसिंग मैट्रिक्स अगल-बगल की तुलना को स्टैक्ड accordion में समेटकर रीफ़्लो करती है, जो वह रिस्पॉन्सिव तरकीब है जो ज़्यादातर टीमें कभी समझ नहीं पातीं: "रिस्पॉन्सिव" का मतलब कभी-कभी "कॉम्पोनेंट बदलो, कॉलम नहीं" होता है। प्राइसिंग पेज की समस्या उस फ़ैसले को विस्तार से कवर करती है।

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

CSS Grid का दौर: प्रिंट-स्तर के औज़ार आख़िरकार आ गए

CSS Grid पहली बार है जब ब्राउज़र के पास ऐसा लेआउट प्रिमिटिव आया जो 1961 के प्रिंट डिज़ाइनर की क्षमता से मेल खाता है। CSS Grid से पहले वेब डिज़ाइनरों के पास floats, Flexbox और ढेर सारा धैर्य था। अब हमारे पास असली ग्रिड लाइनें, नामित एरिया, gap कंट्रोल, और पेज को वैसे सजाने की क्षमता है जैसे Müller-Brockmann पोस्टर सजाते।

यह बदलाव इसलिए मायने रखता है कि जो पहले बिल्ड-टाइम का फ़ैसला था (मैं किस फ्रेमवर्क का ग्रिड इस्तेमाल करूँ), वह अब ब्राउज़र में बना लेआउट प्रिमिटिव है। display: grid प्लस grid-template-columns: repeat(12, 1fr) प्लस gap: 24px एक 12-कॉलम ग्रिड है। कोई फ्रेमवर्क नहीं चाहिए। कोई utility क्लास नहीं। बस CSS वह कर रही है जो उसे दशक पहले कर देना चाहिए था।

Tailwind की grid utilities अब CSS Grid के ऊपर पतली चाशनी भर हैं। Bootstrap का ग्रिड ज़्यादातर ऐसी समस्या का कम्पैटिबिलिटी शिम है जो अब मौजूद ही नहीं। CSS Grid से सबसे ज़्यादा पाने वाली टीमें इसे डिज़ाइन टूल की तरह बरतती हैं, Flexbox के विकल्प की तरह नहीं।

Linear का एडिटर इश्यू पैनल लेआउट के लिए CSS Grid इस्तेमाल करता है। Figma का वेब एडिटर कैनवास क्रोम के लिए इसे इस्तेमाल करता है। Vercel इसे अपनी ज़्यादातर मार्केटिंग साइट में इस्तेमाल करता है। औज़ार किट में है, सवाल यह है कि डिज़ाइन सिस्टम उसे इस्तेमाल कर रहा है या 2026 के इन्फ्रास्ट्रक्चर पर 2018 के पैटर्न चला रहा है।

असली प्रोडक्ट ग्रिड जिन्हें पढ़ना चाहिए

ग्रिड सिस्टम को आत्मसात करने का सबसे तेज़ तरीका उन प्रोडक्ट को खंगालना है जो उन्हें अच्छे से शिप करते हैं। पाँच जिन पर लंबी नज़र डालना बनता है।

Linear ऐप शेल में कसा हुआ column ग्रिड, मार्केटिंग साइट पर 12-कॉलम ग्रिड, और दोनों में baseline रिदम चलाता है। इश्यू लिस्ट, प्रोजेक्ट व्यू, docs पैनल, सब एक ही वर्टिकल और हॉरिज़ॉन्टल ग्रिड पर स्नैप होते हैं। आज प्रोडक्ट UI में यह सबसे साफ़ column-ग्रिड इम्प्लीमेंटेशन है।

Vercel सोचे-समझे नेगेटिव स्पेस के साथ 12-कॉलम ग्रिड चलाता है। मार्केटिंग पेज साँस लेते हैं, डैशबोर्ड ज़्यादा घना modular ग्रिड चलाता है, और डिप्लॉय व्यू, जिसे लोडिंग स्टेट ही प्रोडक्ट है में कवर किया गया है, ऐसा hierarchical ग्रिड चलाता है जहाँ बिल्ड लॉग हावी रहता है और बाकी सब उसे जगह देता है।

Stripe मार्केटिंग सरफ़ेस पर मानक 12-कॉलम ग्रिड और डैशबोर्ड में modular ग्रिड है। डैशबोर्ड कार्ड सुसंगत चौड़ाइयों पर स्नैप होते हैं, मेट्रिक ब्लॉक की ऊँचाई एक जैसी है, और पूरा प्रोडक्ट तीस से ज़्यादा स्क्रीन में एक कंपोज़िशन की तरह पढ़ा जाता है। एंटी-डैशबोर्ड का विश्लेषण उस दर्शन को कवर करता है जिसे यह ग्रिड लागू करता है।

Apple प्रोडक्ट पेज पर hierarchical ग्रिड, हर जगह baseline रिदम, और App Store व Newsroom में modular ग्रिड शिप करता है। Apple का ग्रिड अनुशासन वेब पर स्विस-स्कूल प्रिंट के सबसे क़रीब की चीज़ है, और ज़्यादातर प्रोडक्ट टीमें कम आँकती हैं कि ब्रांड की छाप का कितना हिस्सा अकेले ग्रिड से आता है।

एडिटोरियल ग्रिड: NYT, Figma और Anthropic

The New York Times होमपेज पर modular ग्रिड, बड़े फ़ीचर पर hierarchical ग्रिड, और लॉन्ग-रीड पर manuscript ग्रिड चलाता है। एक ही प्रकाशन जानबूझकर तीन ग्रिड इस्तेमाल करता है, और एडिटोरियल काम के हिसाब से उनके बीच बदलता है। यही सबक है कि ग्रिड प्रकार हर सरफ़ेस का डिज़ाइन फ़ैसला है, कोई ग्लोबल सेटिंग नहीं।

Figma फ़ाइल ब्राउज़र में column ग्रिड, टीम लाइब्रेरी में modular ग्रिड, और कैनवास के भीतर कस्टम ग्रिड चलाता है। Notion docs के लिए manuscript ग्रिड और डेटाबेस के लिए modular ग्रिड देता है। Loops और Resend, दोनों नए प्रोडक्ट, साफ़ 12-कॉलम मार्केटिंग ग्रिड और ऐप में कसे column ग्रिड देते हैं। Anthropic की साइट hierarchical ग्रिड चलाती है जहाँ हर सेक्शन में एक कथन हावी रहता है, जो प्रोडक्ट UI से ज़्यादा एडिटोरियल लेआउट पर आधारित है। ऑनबोर्डिंग के बिना ऑनबोर्डिंग वाला लेख दिखाता है कि ग्रिड अनुशासन पहली बार चलाने वाले उन फ़्लो तक कैसे पहुँचता है जिन्हें अक्सर एकबारगी लेआउट मान लिया जाता है।

ग्रिड कब तोड़ें (जानबूझकर)

ग्रिड तोड़ना तभी काम करता है जब ग्रिड इतना दिखता हो कि टूटन सोचा-समझा चुनाव लगे। टूटन के पीछे ग्रिड न हो तो टूटा हुआ एलिमेंट पेज पर बस एक बेतरतीब चीज़ है।

वह Apple प्रोडक्ट पेज जो हीरो इमेज को मार्जिन के पार जाने देता है, उस ग्रिड को तोड़ रहा है जो बाकी हर जगह कसकर टिका है। वह NYT फ़ीचर जिसमें निबंध के बीच कोई तस्वीर फ़ुल ब्लीड में फूट पड़ती है, उस ग्रिड को तोड़ रहा है जो ऊपर और नीचे अनुशासित मॉड्यूल चलाता है। Anthropic का होमपेज कभी-कभी एक अकेले उद्धरण को अपेक्षित आकार से दोगुना बड़ा करके धुरी से हटकर बैठने देता है, और यह चाल इसलिए चलती है कि उसके आसपास सब कुछ कसा हुआ है।

नियम है हर सरफ़ेस पर एक टूटन। दो टूटन का मतलब पढ़ा जाता है कि ग्रिड ही नहीं है। टूटन पेज का सबसे याद रहने वाला पल होनी चाहिए। अगर आप उस ग्रिड की ओर इशारा नहीं कर सकते जिसे एलिमेंट तोड़ रहा है, तो आप ग्रिड नहीं तोड़ रहे, आप बेढंगे लेआउट को सजा रहे हैं। वायरफ़्रेम की ग्लॉसरी एंट्री शुरुआती चरण के उस फ़ैसले को कवर करती है कि आप किस ग्रिड के लिए प्रतिबद्ध हो रहे हैं।

सेटिंग्स पेज की समस्या में सेटिंग पैनल का अनुशासन एक संबंधित सबक है। सेटिंग्स पेज वे जगहें होती हैं जहाँ ग्रिड अनुशासन ढह जाता है, क्योंकि हर सेटिंग इतनी अलग लगती है कि अलग लेआउट की हक़दार लगे। वह नहीं है। ग्रिड थामे रखिए, कंटेंट को उसके भीतर बदलने दीजिए।

ग्रिड ही ब्रांड है, भले कोई उसकी ओर इशारा न करे

इस लेख में बताए किसी भी प्रोडक्ट से रंग, टाइप और इमेजरी हटा दें, तब भी ग्रिड पहचाने जा सकेंगे। Linear का ग्रिड तब भी Linear जैसा लगेगा। Stripe का ग्रिड तब भी Stripe जैसा लगेगा। ग्रिड वह सबसे गहरी ब्रांड कलाकृति है जो कोई प्रोडक्ट शिप करता है, क्योंकि यही वह है जिसे यूज़र बिना सचेत रूप से देखे महसूस करता है।

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

FAQ

Column ग्रिड और modular ग्रिड में क्या अंतर है?

Column ग्रिड कैनवास को सिर्फ़ खड़े कॉलम में बाँटता है, इसलिए लेआउट ब्लॉक एक या ज़्यादा कॉलम घेरते हैं और रिदम क्षैतिज होती है। Modular ग्रिड कैनवास को दोनों दिशाओं में, कॉलम और रो, सेल में बाँटता है, इसलिए ब्लॉक सेल पर स्नैप होते हैं और घनत्व डिज़ाइन की हुई विशेषता बन जाता है। Column ग्रिड मार्केटिंग साइट और ज़्यादातर ऐप शेल सँभालते हैं। Modular ग्रिड डैशबोर्ड, एडिटोरियल लेआउट और उस हर UI को सँभालते हैं जहाँ कई छोटी तुलनीय इकाइयों को एक सिस्टम की तरह पढ़ा जाना है।

12-कॉलम ग्रिड ही मानक क्यों है?

12 सबसे ज़्यादा विभाज्य छोटी संख्या है। यह 1, 2, 3, 4, 6 और 12 में साफ़ बँटती है, जिससे लगभग हर लेआउट पैटर्न (फ़ुल-विड्थ, आधे, तिहाई, चौथाई, छठे) भिन्नों के बिना कवर हो जाता है। Bootstrap ने इसे 2011 में संहिताबद्ध किया, Tailwind इसे डिफ़ॉल्ट देता है, और उसके बाद हर बड़े डिज़ाइन सिस्टम ने यही चुनाव अपनाया क्योंकि गणित तो गणित है।

CSS Grid आ जाने के बाद क्या मुझे अब भी CSS फ्रेमवर्क चाहिए?

लेआउट के लिए, नहीं। display: grid के साथ grid-template-columns: repeat(12, 1fr) और gap CSS की तीन लाइनों में 12-कॉलम ग्रिड है। Bootstrap और Tailwind जैसे फ्रेमवर्क कॉम्पोनेंट कन्वेंशन, utility शॉर्टहैंड और टीम-व्यापी सुसंगति से मूल्य जोड़ते हैं, लेकिन लेआउट प्रिमिटिव अब ब्राउज़र की सुविधा है। अगर फ्रेमवर्क आपकी टीम को तेज़ करता है तो इस्तेमाल करें। इसलिए इस्तेमाल न करें कि आपको लगता है ग्रिड के लिए यह ज़रूरी है।

FAQ: ग्रिड को शिप करना और तोड़ना

असली प्रोडक्ट में baseline रिदम कैसे बनाए रखूँ?

एक बेस यूनिट चुनिए, आमतौर पर 8 पिक्सेल। हर padding, margin, line-height और कॉम्पोनेंट डाइमेंशन को उस यूनिट का गुणज बनाइए। 16 पिक्सेल की बॉडी टाइप के साथ 24 पिक्सेल line-height।

हेडिंग 32, 40, 48 या 56 पर, line-height 40, 48, 56 या 64 के साथ। सेक्शन स्पेसिंग 96 या 128। यह अनुशासन उबाऊ है, नतीजा ऐसा पेज है जो ड्राफ़्ट नहीं, तैयार प्रोडक्ट जैसा पढ़ा जाता है।

ग्रिड कब तोड़ना चाहिए?

हर सरफ़ेस पर एक बार, जब ग्रिड इतना दिखता हो कि टूटन सोची-समझी लगे। टूटन पेज का सबसे याद रहने वाला पल होनी चाहिए। अगर आप उस ग्रिड की ओर इशारा नहीं कर सकते जिसे एलिमेंट तोड़ रहा है, तो पेज में अभी ग्रिड है ही नहीं, बस एक लेआउट है। पहले ग्रिड ठीक कीजिए, फिर उसे तोड़िए।

CTA

अगर आपको ऐसी टीम चाहिए जो ग्रिड सिस्टम को लॉन्च से पहले की बाद की सोच नहीं, प्रोडक्ट की रीढ़ की तरह डिज़ाइन करे, तो Brainy को हायर करें। हम ऐसे प्रोडक्ट शिप करते हैं जहाँ ग्रिड काम करता है, ब्रांड एक नज़र में पढ़ा जाता है, और रिदम हर सरफ़ेस पर टिकी रहती है। Müller-Brockmann मंज़ूरी दे देते। आपके यूज़र भी देंगे, भले उन्हें कभी पता न चले कि वे कौन-सा ग्रिड देख रहे हैं।