ग्रिड सिस्टम और मॉड्यूलेरिटी

1) जाल क्यों

ग्रिड अनुमानित इंटरफ़ेस व्यवहार प्रदान करता है क्योंकि सामग्री और स्क

डिजाइन और विकास को तेज करता है (आम भाषा: "12 स्तंभ, गटर 24"),

संज्ञानात्मक भार को कम करता है (यहां तक कि लय, स्थिर रेखाएं),

पृष्ठों के बीच घटकों की पोर्टेबिलिटी बढ़ाता है

आपको "माइक्रोलेइंग" के बिना एक मॉड्यूलर लाइब्रेरी बनाने की अनुमति देता है।

2) बुनियादी जाल तत्व

कंटेनर - अधिकतम सामग्री चौड़ाई, केंद्रित क्षेत्र।

मॉड्यूल रखने के लिए स्तम्भ - ऊर्ध्वाधर क्षेत्र।

स्तंभों के बीच गटर - क्षैतिज स्थान।

कंटेनर के बाएं/दाएं हाशिया - बाहरी क्षेत्र।

पंक्ति/ट्रैक - क्षैतिज गाइड (सीएसएस ग्रिड - लाइन/ट्रैक्स में)।

बेसलाइन - ऊर्ध्वाधर टाइपोग्राफी ग्रिड।

अनुशंसित ऊर्ध्वाधर लय: 8-पीटी (कभी-कभी बारीकियों के लिए 4-पीटी), आकार और इंडेंट की इकाइयाँ 4/8 के गुणक हैं।

3) ब्रेकपॉइंट और कंटेनर

वास्तविक डिवाइस एनालिटिक्स से ब्रेकपॉइंट उठाएं। उदाहरण:

बिंदु	आउटलेट की चौड़ाई	स्तम्भों की संख्या	कंटेनर	गटर
एक्सएस	≥ 360	4	तरल पदार्थ	16
एसएम	≥ 600	6	560–584	16
एमडी	≥ 840	8	760–808	20
एलजी	≥ 1200	12	1104–1152	24
एक्सएल	≥ 1440	12	1280–1320	24–32

नियम:

रेखा कंटेनर (ठीक करें। बड़ी स्क्रीन पर अधिकतम चौड़ाई), द्रव - मोबाइल पर।
गटर आसानी से बड़े ब्रेकपॉइंट तक बढ़ सकता है।
स्तंभ - 4/6/8/12 "कोर सेट" के रूप में।

4) मॉड्यूलरिटी और घनत्व

मॉड्यूल - सामग्री का एक ब्लॉक जो आधारभूत ऊंचाइयों के स्तंभों और गुणकों पर कब्जा करता है।

घनत्व:

आराम (डैशबोर्ड, पढ़ ना): बड़े फोंट, इंडेंट 16-24।
कॉम्पैक्ट (टेबल, प्रो-मोड): फोंट + 0/ − 1 पीएक्स, ऊर्ध्वाधर इंडेंट्स − 4/ − 8, पंक्ति ऊंचाई तय की जाती है (8 के गुणक)।

घटकों में न्यूनतम घनत्व के दो प्रस्तुत होंगे।

5) टाइपोग्राफी और बेसलाइन ग्रिड

मूल लाइन-ऊंचाई चुनें (उदाहरण के लिए, 24 px) और तत्वों की ऊंचाइयों को तुल्यकालित करें (बटन 40/48/56 px बेसलाइन के गुणक हैं)।

हेडिंग एंकर ऊर्ध्वाधर लय: ऊपर/नीचे इंडेंट 8 के गुणक हैं।

पाठ की ऊंचाई पर प्रतीक संरेखित करें.

6) लेआउट टेम्पलेट्स

6. 1 कार्ड

ग्रिड: मोज़ेक (ठीक करें। कार्ड चौड़ाई) या स्तंभ (कार्ड = एन कॉलम)।

लोडिंग करते समय "जंपिंग" से बचने के लिए न्यूनतम सामग्री ऊंचाई; कार्ड के भीतर कंकाल।

आंतरिक पैडिंग: 16/20/24 ब्रेकपॉइंट के आधार पर।

6. 2 टेबल

पूर्ण चौड़ाई कंटेनर; क्षैतिज रूप से स्क्रॉल करते समय पहले स्तंभ/टोपी को फ्रीज करें।

कोशिकाएं बेसलाइन-तह हैं; संख्यात्मक स्तंभ अंकों/दशमलव द्वारा संरेखित हैं।

XS पर - बहुत सारे कॉलम होने पर क्षैतिज स्क्रॉलिंग के बजाय "स्टैक्ड लेआउट"।

6. 3 रूप

एक्सएस/एसएम पर एकल-स्तंभ, एमडी + पर दो या तीन-स्तंभ (टैब/अनुभागों के तर्क को ध्यान में रखते हुए)।

फ़ील्ड + लेबल + हेल्प टेक्स्ट एक सामान्य मॉड्यूल में फिट होता है (ऊंचाई 8 के गुणक होते हैं)।

6. 4 डैशबोर्ड

स्थिरता के लिए निश्चित पटरियों और बादलों (क्षेत्रों) के साथ ग्रिड।

विजेट में स्तंभों में न्यूनतम और अधिकतम चौड़ाई होती है; ऊंचाइयाँ बेसलाइन के गुणक हैं।

जब पुनर्वितरण - स्तंभों की संख्या बदलती है, तो मनमाने ढंग से विजेट विभाजित न करें।

7) अनुकूलनशीलता, ऑटो-लेआउट और व्यवहार

ग्रिड के सामने की सामग्री: ग्रिड इसे तोड़ ने के बजाय सामग्री को समायोजित करता है।

Figma/Auto-layout:

कार्ड/सूचियों के लिए बाधाओं (बाएं/दाएं/केंद्र) और ऑटो लेआउट का उपयोग करें।
XS/SM/MD/LG (पैडिंग परिवर्तन, स्लॉट क्रम) के लिए समर्थन घटक विकल्प।

सीएसएस:

अनुभाग स्तर पर - सीएसएस ग्रिड (क्षेत्र, स्तंभ, पंक्तियाँ)।
घटकों के अंदर - फ्लेक्स (कुल्हाड़ियाँ, रिक्त स्थान का संतुलन)।

8) सीएसएस ग्रिड/फ्लेक्स - कार्यशाला

कंटेनर और 12 कॉलम ग्रिड:

css
.container {
max-width: 1280px; margin: 0 auto; padding: 0 16px;
display: grid; gap: 24px;
grid-template-columns: repeat(12, minmax(0, 1fr));
}
.col-4 { grid-column: span 4; }
@media (max-width: 1199px) {
.container { grid-template-columns: repeat(8, 1fr); gap: 20px; }
.col-4 {grid-column: span 8; }/full-width card/
}
@media (max-width: 839px) {
.container { grid-template-columns: repeat(6, 1fr); gap: 16px; }
}
@media (max-width: 599px) {
.container { grid-template-columns: repeat(4, 1fr); }
}

ग्रिड क्षेत्र (डैशबोर्ड):

css
.dashboard {
display: grid; gap: 24px;
grid-template:
"kpi kpi chart chart" auto
"tbl tbl chart chart" 1fr / 1fr 1fr 1fr 1fr;
}
.kpi  { grid-area: kpi; }
.chart { grid-area: chart; }
.tbl  { grid-area: tbl; }
@media (max-width: 1199px) {
.dashboard { grid-template:
"kpi" auto "chart" auto "tbl" 1fr / 1fr; }
}

9) इंडेंट्स और टोकन

डिजाइन प्रणाली में तराजू पर कब्जा करें।

json
{
"space": { "xs": 4, "sm": 8, "md": 12, "lg": 16, "xl": 24, "2xl": 32, "3xl": 48 },
"container": { "sm": 584, "md": 808, "lg": 1152, "xl": 1320 },
"gutter": { "sm": 16, "md": 20, "lg": 24, "xl": 32 },
"columns": { "xs": 4, "sm": 6, "md": 8, "lg": 12 }
}

नियम:

घटकों के आंतरिक इंडेंट 'स्पेस' से हैं।
कंटेनरों के बाहरी क्षेत्र 'गटर '/' मार्जिन' से हैं।
तत्व ऊंचाई 8 (40/48/56) के गुणक हैं।

10) मॉड्यूलर घटक

अवयव जरूर होना चाहिए:

पता है कि यह प्रत्येक ब्रेकपॉइंट पर कितने कॉलम लेता है;
न्यूनतम/अधिकतम आयाम हैं;
"जादू" पिक्सेल पर निर्भर न करें - केवल टोकन;
आंतरिक ग्रिड (शीर्षक, सामग्री, पादप) को बेसलाइन पर रखें।

11) छवियां और मीडिया भाग

पहलू-अनुपात ठीक करें (उदा। पूर्वावलोकन और कार्ड के लिए 16/9, 4/3, 1/1)।

css
.media { aspect-ratio: 16 / 9; object-fit: cover; }

एक्सएस पर, केवल प्रोमो के लिए पूर्ण-रक्त (किनारों के चारों ओर चित्र) का उपयोग करें, बाकी सामग्री कंटेनर का अनुसरण करती है।

छवि पाठ - केवल पर्ची/ओवरले पर, विपरीत ≥ AA।

12) आरटीएल और स्थानीयकरण

ग्रिड दिशा दर्पण: 'dir = "rtl" और': dir (rtl) '-rules के लिए इंडेंट/आइकन।

तालिकाओं में स्तंभ क्रम और जमे हुए स्तंभ - दर्पण पर विचार करें।

लाइनों और स्थानान्तरणों की लंबाई मॉड्यूल की ऊंचाइयों को बदल सकती है - स्टॉक को नीचे रखना।

13) iGaming की बारीकियाँ

प्रोमो क्षेत्र और बैनर: बड़े मॉड्यूल के साथ एक अलग ग्रिड; पाठ हमेशा प्लेट पर होता है, महत्वपूर्ण सूचनाओं (18 +, सीमा, जोखिम) के लिए एएए विपरीत।

नेता/रेटिंग: एक निश्चित पहले स्तंभ और एक चिपचिपा हेडर के साथ तालिकाएं, सारणीबद्ध संख्या (वर्जित-सुन्न), पंक्ति ऊंचाई 8 के गुणक हैं।

खिलाड़ियों/संचालन के डैशबोर्ड: विजेट (सत्र, जमा, आरटीपी, नेट जमा) 12-ग्रिड पर 3-6 स्तंभों पर कब्जा करते हैं; एमडी/एसएम पर कैस्केड पुनर्निर्माण।

टूर्नामेंट कार्ड: कार्ड 3 × एन (एलजी), 2 × एन (एमडी), 1 × एन (एसएम/एक्सएस) का ग्रिड; एक स्थायी स्थान पर CTA।

14) पहुँच और फोकस

फोकस रिंग्स को लय को नहीं तोड़ ना चाहिए: रूपरेखा-ऑफसेट या आंतरिक छद्म तत्व जोड़ें।

न्यूनतम क्लिक आकार: 44 × 44 (मोबाइल )/32 × 32 (डेस्कटॉप)।

केवल प्लेसमेंट द्वारा अर्थ को एनकोड न करें; पाठ लेबल और आरिया गुण सहेजें।

15) प्रदर्शन

घोंसले के शिकार ग्रिड की गहराई को कम करें: 1 मुख्य ग्रिड अनुभाग + फ्लेक्स अंदर।

सैकड़ों कार्डों पर भारी छाया/मुखौटे से बचें; सूचियों में सपाट शैलियों का उपयोग करें।

मीडिया सामग्री का आलसी लोडिंग; निश्चित अनुपात सीएलएस को रोकते हैं।

16) एंटीपैटर्न

"ग्रिड टू स्वाद" स्थिरता → प्रत्येक पृष्ठ पर crumbles।

गटर अनुभाग द्वारा मनमाने ढंग से भिन्न होता है।

असंगत घनत्व (एक स्क्रीन में कॉम्पैक्ट और आराम दोनों)।

जादू की चौड़ाई-निर्भर घटक (कोई स्तंभ/टोकन नहीं)।

वैकल्पिक लेआउट के बिना मोबाइल पर क्षैतिज स्क्रॉलिंग के साथ तालिकाएँ।

छवि में पाठ बिना मर जाता है और कंट्रास्ट नियंत्रण।

17) क्यूए चेकलिस्ट

संरचना

कॉलम/कंटेनर/मार्जिन ब्रेकपॉइंट के अनुरूप हैं।
गटर पृष्ठ के भीतर स्थिर है।
हाइट्स और इंडेंट्स 8 के गुणा हैं।

घटक

स्तम्भ चौड़ाई (एक्सएस।।। XL) और मिनट/अधिकतम परिभाषित हैं।
आंतरिक ग्रिड बेसलाइन के साथ संरेखित हैं।

टेबल/फॉर्म

स्टिकी-कैप/पहला कॉलम; एक्सएस पर स्टैक्ड मोड।
फॉर्म फील्ड बेसलाइन के गुणक हैं; लेबल/हेल्प टेक्स्ट "जंप" नहीं करता है।

A11y

फोकस शैलियाँ लय को नहीं तोड़ ती हैं; क्लिक ज़ोन - न्यूनतम।

निष्पादन

मीडिया ब्लॉकों के कारण कोई सीएलएस नहीं; आलसी लोडिंग सक्षम है।

18) डिजाइन प्रणाली में टोकन और प्रलेखन

ग्रिड अंतरिक्ष पृष्ठ प्रकाशित करें: (S)

मान 'कंटेनर', 'कॉलम', 'गटर', 'स्पेस', बेसलाइन;

लेआउट (कार्ड/टेबल/फॉर्म/डैशबोर्ड) के उदाहरण;

घनत्व प्रीसेट (आराम/कॉम्पैक्ट) और घटकों पर उनका प्रभाव;

CSS ग्रिड/फ्लेक्स और फिग्मा शैलियों/लेआउट के लिए कोड स्निपेट।

संक्षिप्त सारांश

ग्रिड डिजाइन और विकास के बीच एक संविदा है। ब्रेकपॉइंट, कंटेनर, स्पीकर और 8-पीटी लय, डिजाइन टोकन और लेआउट टेम्पलेट पर कब्जा करें, घनत्व विकल्प, अनुकूलन और उपलब्धता प्रदान करें। फिर पृष्ठ अनुमानित रूप से पैमाने पर, घटकों का पुन: उपयोग किया जाता है, और कमांड तेज और अधिक स्थिर होता है।

ग्रिड सिस्टम और मॉड्यूलेरिटी

संक्षिप्त सारांश

हमसे संपर्क करें

त्वरित संपर्क

वीडियो जल्द ही अपडेट किया जाएगा

हम इस समय परियोजनाओं में बहुत व्यस्त हैं