बेंटो ग्रिड डिज़ाइन: 2026 यूआई लेआउट प्लेबुक

तीन कॉलम वाली फ़ीचर पंक्ति अब चलन से बाहर हो चुकी है। दो साल पहले ही यह चलन से बाहर हो गई थी और ज़्यादातर डिज़ाइनरों ने अभी तक इसे बदला नहीं है।

आप इसे जानते ही होंगे। तीन बराबर कॉलम, हर कॉलम में एक आइकन, एक शीर्षक और एक पैराग्राफ, मोबाइल पर एक के ऊपर एक रखे हुए। 2018 से 2023 के बीच बनी हर SaaS साइट में यह थी। इसने एक झूठ बेचा: कि आपके उत्पाद में तीन फ़ीचर हैं, जिनमें से हर एक का ध्यान ठीक 33% आकर्षित करने लायक है। ध्यान कभी भी बराबर नहीं होता, और पाठकों ने उन अनुभागों को पढ़ना उसी साल बंद कर दिया जब TikTok ने उन्हें सिखाया कि सघनता ही विशेषता है, खामी नहीं।

बेंटो ग्रिड इसलिए सफल हुआ क्योंकि यह उस बात को स्वीकार करता है जो फ़ीचर पंक्ति कभी नहीं करती थी: कुछ चीज़ें दूसरों से बड़ी होती हैं, और पाठक को यह एक नज़र में पता चल जाना चाहिए। इसके पीछे के गहरे पैटर्न के लिए, दृश्य पदानुक्रम देखें। Apple के Mac पेज इस बात का सबसे स्पष्ट उदाहरण हैं कि यह उत्पादन में कैसा दिखता है।

बेंटो ग्रिड वास्तव में क्या है

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

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

इस पैटर्न की तीन मुख्य विशेषताएं हैं। पहली, असमान खाने, जो आमतौर पर 3 या 4 स्तंभों वाले ग्रिड पर बने होते हैं, जिनमें से कुछ खाने कई स्तंभों या पंक्तियों में फैले होते हैं। दूसरी, प्रत्येक खाने में विविध सामग्री (एक में चार्ट, दूसरे में चित्र, तीसरे में माप, चौथे में अनुभव)। तीसरी, संपूर्ण ग्रिड में दृश्य सामंजस्य, जो आमतौर पर एक समान पृष्ठभूमि, एकसमान बॉर्डर त्रिज्या और संयमित रंग उपयोग के माध्यम से प्राप्त होता है।

यह क्या नहीं है: CSS Grid का डेमो। मेसनरी लेआउट। Pinterest फ़ीड। कार्डों की बेतरतीब व्यवस्था। बेंटो एक संरचनात्मक डिज़ाइन है, एल्गोरिथम आधारित नहीं।

बेंटो ग्रिड संक्षिप्तीकरण है। फ़ीचर रो वर्णन है। अधिकांश उत्पादों को संक्षिप्तीकरण की आवश्यकता होती है।

इसने फ़ीचर रो की जगह क्यों ली

तीन कारण। इनमें से दो स्पष्ट हैं। एक कारण है जिसके चलते यह पैटर्न लोकप्रिय हुआ।

पहला कारण: पेज पर बिताया गया समय। Apple के मार्केटिंग पेजों पर किए गए आंतरिक परीक्षण से पता चला कि बेंटो सेक्शन, समकक्ष फ़ीचर रो की तुलना में आगंतुकों को लगभग 47% अधिक समय तक पेज पर बनाए रखते हैं। इसका कारण कोई रहस्य नहीं है, बस इतना है कि पाठक बेंटो ग्रिड को सरसरी तौर पर देख सकते हैं। पढ़ने का कोई अनिवार्य क्रम नहीं है। वे पेज पर आते हैं, अपनी रुचि का सेल चुनते हैं और पेज पर बने रहते हैं।

दूसरा कारण: टेक्स्ट की अनावश्यक दीवारों के बिना सघनता। एक अच्छी तरह से डिज़ाइन किया गया बेंटो ग्रिड उतनी ही जगह में छह से आठ बातें बताता है जितनी जगह में एक पारंपरिक लेआउट तीन बातें बताता है। क्योंकि सेल्स में अलग-अलग प्रकार की सामग्री (विज़ुअल, सांख्यिकी, लिखित सामग्री, प्रशंसापत्र) होती है, इसलिए पाठक को सामग्री का घनत्व अधिक नहीं लगता।

तीसरा कारण (वास्तविक कारण): यह आधुनिक उत्पादों की वास्तविक बिक्री के तरीके से मेल खाता है। 2026 में अधिकांश SaaS उत्पाद तीन विशेषताओं वाले नहीं होते। वे एक मुख्य क्षमता, तीन से पाँच सहायक क्षमताओं, एक एकीकरण कहानी, एक प्रमाण बिंदु और शायद एक विशिष्ट विशेषता, जिसे अलग से उल्लेख करने योग्य माना जाता है, वाला एक प्लेटफ़ॉर्म होते हैं। यह आकार तीन-स्तंभ वाली पंक्ति में फिट नहीं बैठता। यह एक बेंटो बॉक्स में फिट बैठता है। लेआउट सामग्री के अनुरूप है।

| पैटर्न | इस कहानी के लिए उपयुक्त | इस कहानी के लिए अनुपयुक्त |

|---------|-----------------|------------------|

| तीन-स्तंभ वाली विशेषता पंक्ति | तीन समान विशेषताएँ, कथात्मक उत्पाद | असमान विशेषता भार वाले प्लेटफ़ॉर्म |

| विशेषता स्टैक (पूर्ण-चौड़ाई वाली पंक्तियाँ) | गहन विशेषता स्पष्टीकरण | एक नज़र में व्यापकता दिखाने की आवश्यकता |

| बेंटो ग्रिड | प्लेटफ़ॉर्म, सूट, डैशबोर्ड, प्रमाण पृष्ठ | Linear ट्यूटोरियल, चरण-दर-चरण प्रक्रिया |

वर्तमान में तीन सर्वश्रेष्ठ वास्तविक कार्यान्वयन

Apple (apple.com/mac)। ऊपर दिखाया जा चुका है। 2022 के अंत से आगे के सभी मैक उत्पाद पृष्ठ बेंटो का उपयोग करते हैं। एम-सीरीज़ चिप अनुभाग सबसे साफ पैटर्न है: चिप विज़ुअल के लिए एक प्रमुख सेल, बेंचमार्क और उपयोग के मामलों के लिए छोटे सेल। साझा गहरा बैकग्राउंड, साझा कॉर्नर रेडियस, एकसमान आंतरिक पैडिंग। चिप हमेशा दृश्य रूप से प्रमुख रहती है। यह संपादकीय निर्णय है, ग्रिड नहीं।

Linear (linear.app/features) डेवलपर टूलिंग के लिए बेंटो। फ़ीचर पेज 4-कॉलम बेंटो का एक स्टैक है जहाँ मुख्य क्षमता (समस्या ट्रैकिंग, योजना, निर्माण) 2x2 सेल लेती है और छोटे फ़ीचर 1x1 या 1x2 सेल लेते हैं। Linear का डिज़ाइन संयम के लिए प्रसिद्ध है: केवल उत्पाद स्क्रीनशॉट, कोई स्टॉक इलस्ट्रेशन नहीं, मोनोस्पेस लेबल। यह जानबूझकर एक स्पेसिफिकेशन शीट की तरह दिखता है।

Vercel (vercel.com). Vercel का होमपेज बेंटो हाइब्रिड संस्करण है। कुछ सेल इलस्ट्रेशन हैं, कुछ उत्पाद स्क्रीनशॉट हैं, और कुछ केवल टेक्स्ट हैं। यह साबित करता है कि आप एक ही बेंटो में विभिन्न मीडिया को मिश्रित कर सकते हैं, बिना असंगतता के, बशर्ते प्रत्येक सेल एक ही दृश्य भाषा (एक ही पृष्ठभूमि, एक ही त्रिज्या, एक ही आंतरिक रिक्ति लय) साझा करे।

तीन अलग-अलग उद्योग, तीन अलग-अलग टोन, एक ही मूल पैटर्न। यह पैटर्न फैशन से संबंधित नहीं है। यह एक विशिष्ट संचार समस्या के लिए बनाया गया लेआउट है: "हम बहुत कुछ करते हैं, यहाँ एक नज़र में देखें, वह चुनें जिसमें आपकी रुचि है।"

ग्रिड का गणित (जितना दिखता है उससे कहीं ज़्यादा आसान)

ज़्यादातर बेंटो ग्रिड दो बुनियादी संरचनाओं में से किसी एक का इस्तेमाल करते हैं।

तीन-स्तंभ वाला बेंटो: छोटे-छोटे सेक्शन, प्रशंसापत्र और मुख्य विशेषताओं को दिखाने के लिए बढ़िया। सामान्य पैटर्न:

• एक 2x1 का मुख्य सेल (2 स्तंभ, 1 पंक्ति में फैला हुआ)
• एक 1x1 का सेल (1 स्तंभ, 1 पंक्ति में)
• दूसरी पंक्ति में दो 1x1 के सेल
• एक 1x2 का सेल, जिसमें ऊर्ध्वाधर भार की आवश्यकता होती है

चार-स्तंभ वाला बेंटो: ज़्यादा चौड़ाई वाले पूरे सेक्शन के लिए बेहतर। सामान्य पैटर्न:

• एक 2x2 हीरो सेल
• इसके बगल में दो 1x1 सेल
• सबसे नीचे एक 2x1 सेल
• पंक्ति को समाप्त करने के लिए एक 1x1 सेल

CSS Grid में आप लगभग बीस पंक्तियों में बेंटो ग्रिड बना सकते हैं:

.bento {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 240px;
  gap: 16px;
}
.bento-cell-hero { grid-column: span 2; grid-row: span 2; }
.bento-cell-wide { grid-column: span 2; }
.bento-cell-tall { grid-row: span 2; }
.bento-cell-default { grid-column: span 1; grid-row: span 1; }

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

रिस्पॉन्सिव नियम जो कभी विफल नहीं होते

डेस्कटॉप बेंटो आसान है। मोबाइल बेंटो में अधिकांश कार्यान्वयन विफल हो जाते हैं।

गलती: ग्रिड का आकार बनाए रखना और हर चीज़ को छोटा करना। 390px चौड़ाई पर, एक 4-कॉलम वाला बेंटो चार 90px कॉलम बन जाता है, जो बेकार है। सेल में वास्तविक सामग्री नहीं रखी जा सकती।

नियम: पुनः व्यवस्थित करें, छोटा न करें। मोबाइल पर, बेंटो ग्रिड एक ही कॉलम में सिमट जाता है, लेकिन पदानुक्रम बनाए रखने के लिए सेल का क्रम बदल जाता है।

• हीरो सेल सबसे ऊपर चला जाता है (मोबाइल पर सबसे अधिक दृश्य प्रभाव वाला सेल पहले आता है)
• 2x1 चौड़ाई वाले सेल पूर्ण चौड़ाई वाले एकल-कॉलम सेल बन जाते हैं
• 1x2 ऊँचाई वाले सेल मानक ऊँचाई वाले सेल बन जाते हैं, लंबवत रूप से नहीं खिंचते
• क्रम महत्व के आधार पर तय किया जाता है, न कि डेस्कटॉप पर दृश्य स्थिति के आधार पर

CSS Grid, grid-template-areas और मीडिया क्वेरीज़ के साथ इसे आसान बनाता है। या, Tailwind में: केवल बड़ी स्क्रीन पर बेंटो स्पैन लागू करने के लिए lg: उपसर्गों का उपयोग करें, और डिफ़ॉल्ट मोबाइल स्टैक को स्वयं संभालने दें।

| ब्रेकपॉइंट | ग्रिड व्यवहार |

|------------|---------------|

| डेस्कटॉप (1280px+) | पूर्ण बेंटो, विभिन्न स्पैन के साथ 4-कॉलम |

| टैबलेट (768-1279px) | सरलीकृत बेंटो, कुछ स्पैन के साथ 2-कॉलम |

मोबाइल (768px से कम) | एकल कॉलम, सामग्री प्राथमिकता के अनुसार पुनर्व्यवस्थित |

परीक्षण: 390px पर, प्रत्येक सेल इतना लंबा होना चाहिए कि उसके अंदर की सामग्री ज़ूम किए बिना या क्षैतिज स्क्रॉल किए बिना पठनीय हो। यदि ऐसा नहीं है, तो सेल गलत है, व्यूपोर्ट नहीं।

यदि आप लेआउट के और अधिक विवरण चाहते हैं, तो Brainy पेपर्स देखें। यदि आपको लैंडिंग पृष्ठ चाहिए जो फीचर पंक्तियों की दीवार के कारण आगंतुकों को खोने से रोकता है, तो किराया Brainy देखें और हम वास्तविक लेआउट, वास्तविक सामग्री और वास्तविक रूपांतरण प्रदान करते हैं।

बेंटो ग्रिड कब गलत विकल्प है

बेंटो एक सर्वव्यापी समाधान नहीं है। इसका गलत इस्तेमाल करने पर आप उन सेल्स में जबरदस्ती कंटेंट भर देंगे जिन्हें खाली जगह चाहिए।

बेंटो इन स्थितियों में विफल हो जाता है:

• आपका कंटेंट क्रमबद्ध है। एक चरण-दर-चरण ट्यूटोरियल, एक ऑनबोर्डिंग प्रक्रिया, एक केस स्टडी। इनमें रैखिक क्रम की आवश्यकता होती है। बेंटो पढ़ने के क्रम को खत्म कर देता है।

• हर भाग का महत्व बराबर है। यदि आपके पास वास्तव में तीन बराबर फ़ीचर हैं, तो तीन कॉलम वाली पंक्ति अभी भी सही है। बेंटो में आंतरिक पदानुक्रम की आवश्यकता होती है। बेंटो सेल्स में समतल करने से बराबर चीज़ें बेतरतीब ढंग से रैंक की हुई दिखाई देती हैं।

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

• आपके पास मजबूत दृश्य सामग्री नहीं है। बेंटो ग्रिड सबसे अच्छे तब लगते हैं जब सेल्स में दृश्य (चार्ट, उत्पाद शॉट, चित्र) हों। केवल टेक्स्ट वाले बेंटो तंग अखबार लेआउट की तरह दिखते हैं।

निर्णय तालिका:

| आपका कंटेंट है... | उपयोग |

|--------------------|-----|

| असमान फीचर भार वाला प्लेटफ़ॉर्म | बेंटो ग्रिड |

| तीन समान, समानांतर फीचर | तीन-स्तंभ वाली पंक्ति |

| एक वर्णनात्मक व्याख्या | फीचर स्टैक (पूर्ण-चौड़ाई वाली पंक्तियाँ) |

| चरण-दर-चरण प्रवाह | क्रमांकित अनुभाग |

| डैशबोर्ड-शैली का प्रूफ पेज | बेंटो ग्रिड |

| एक फीचर पर गहन विश्लेषण | मुख्य अनुभाग + सहायक अनुभाग |

डिज़ाइनर का प्रारंभिक पैटर्न

इसे आधार रेखा के रूप में उपयोग करें। यहीं से संपादन करें, शुरू से निर्माण न करें।

अनुभाग संरचना:

1. ग्रिड के ऊपर पूर्ण-चौड़ाई वाला शीर्षक (एक पंक्ति, आकर्षक)
2. 4-स्तंभ वाला ग्रिड, कुल 3 से 5 पंक्तियाँ
3. एक मुख्य सेल (2x2), जो देखने में सबसे आकर्षक हो
4. चार से छह सहायक सेल, विभिन्न प्रकार की सामग्री
5. CTA या प्रूफ के लिए वैकल्पिक पूर्ण-चौड़ाई वाला समापन सेल

सेल सामग्री नियम:

• प्रति सेल एक वाक्य, अधिकतम। यदि आपको पैराग्राफ की आवश्यकता है, तो सेल बहुत छोटा है।

• प्रति सेल एक एसेट (चार्ट, चित्र, स्क्रीनशॉट, मेट्रिक, प्रशंसापत्र, लोगो)।

• एकसमान आंतरिक पैडिंग (आमतौर पर 24-32px)।

• एकसमान कॉर्नर रेडियस (आमतौर पर 12-16px)।

• संयमित रंग प्रयोग। अधिकांश सेल एक ही पृष्ठभूमि साझा करते हैं। एक या दो सेल को इनवर्ट किया जा सकता है या एक्सेंट का उपयोग किया जा सकता है।

मोबाइल लेआउट: पहले हीरो सेल, फिर तीन सबसे महत्वपूर्ण सहायक सेल, फिर बाकी।

अपने अगले लैंडिंग पेज पर एक बेंटो सेक्शन शामिल करें। आपको फर्क महसूस होगा।

अक्सर पूछे जाने वाले प्रश्न

क्या बेंटो ग्रिड सिर्फ एक चलन है?

नहीं। चलन एक से दो साल तक चलते हैं। बेंटो ग्रिड 2022 से प्रमुख उत्पाद पृष्ठों पर हावी रहे हैं और अभी भी कायम हैं। यह एक विशिष्ट संचार समस्या के लिए एक लेआउट पैटर्न है, और वह समस्या दूर नहीं होने वाली है।

क्या मैं ब्लॉग या कंटेंट साइट पर बेंटो ग्रिड का उपयोग कर सकता हूँ?

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

बेंटो ग्रिड और मेसनरी में क्या अंतर है?

मेसनरी एल्गोरिदम पर आधारित है। सेल सामग्री की ऊंचाई के आधार पर स्वचालित रूप से रखे जाते हैं। बेंटो संरचनात्मक है। सेल डिज़ाइनर द्वारा महत्व के आधार पर जानबूझकर रखे जाते हैं। मेसनरी Pinterest के लिए उपयुक्त है। बेंटो उत्पादों के लिए उपयुक्त है।

क्या बेंटो ग्रिड डैशबोर्ड के लिए उपयुक्त हैं?

हाँ, जब डैशबोर्ड में विजेट का भार असमान हो। एक प्राथमिक मीट्रिक, कई माध्यमिक मीट्रिक, एक चार्ट, एक लॉग, एक हालिया गतिविधि फ़ीड। यही बेंटो का आकार है। देखें: Linear का प्रोजेक्ट व्यू, Vercel का डिप्लॉयमेंट डैशबोर्ड।

बेंटो ग्रिड में कितने सेल होने चाहिए?

चार से आठ के बीच। चार से कम होने पर यह ग्रिड के रूप में नहीं दिखता। आठ से ज़्यादा होने पर यह एक दीवार की तरह लगने लगता है। सात एक सामान्य अनुकूलता है।

फ़ीचर रो बनाना बंद करें

पिछले तीन वर्षों में बनी किसी भी SaaS साइट को देखें। आपको उसमें तीन कॉलम वाली फ़ीचर रो दिखाई देंगी। बेंटो सेक्शन भी देखें। हर साल इनकी संख्या उलट जाती है।

इसका एक कारण है। फ़ीचर रो एक ऐसी कहानी का लेआउट था जिसे हमने बताना बंद कर दिया था, यानी "तीन समान फ़ीचर" वाली कहानी। आधुनिक उत्पादों में तीन समान फ़ीचर नहीं होते। उनमें एक प्लेटफ़ॉर्म, एक मुख्य क्षमता, सहायक क्षमताओं का एक समूह, एक प्रमाण बिंदु और एक समापन CTA होता है। यह आकार बेंटो में तो फिट बैठता है, लेकिन रो में नहीं।

अपनी वर्तमान साइट पर एक ऐसा पेज चुनें जिसमें अभी भी फ़ीचर रो है। उस एक सेक्शन को बेंटो ग्रिड के रूप में रीडिज़ाइन करें। सबसे मज़बूत क्षमता को मुख्य सेल में रखें। प्रमाण को एक सहायक सेल में रखें। एक पंक्ति में मुख्य विशेषता लिखें। इसे लॉन्च करें।

देखें कि साइट पर बिताया गया समय बढ़ जाता है। बाउंस रेट कम हो जाता है। देखें कि पेज वास्तव में काम करता है।

फ़ीचर रो बनाना बंद करें।