---
title: "लेआउट"
description: "विंडो साइज़ क्लास, स्पेसिंग स्केल, और लेआउट उनके बीच कैसे ढलते हैं।"
url: "https://tanrei.chnotchy.com/hi/foundations/layout/"
last_updated: 2026-10-23T17:33:05.000Z
---

# लेआउट

> विंडो साइज़ क्लास, स्पेसिंग स्केल, और लेआउट उनके बीच कैसे ढलते हैं।

## विंडो साइज़ क्लास

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

| क्लास | चौड़ाई | आम लेआउट |
| --- | --- | --- |
| कॉम्पैक्ट | 600 से कम | एक कॉलम। नेविगेशन नीचे के बार में या किसी मेन्यू के पीछे। |
| मीडियम | 600–839 | चौड़े मार्जिन के साथ एक कॉलम, या जहाँ कॉन्टेंट इजाज़त दे वहाँ दो। समेटा हुआ नेविगेशन ड्रॉअर (आइकन का एक कॉलम) संभव हो जाता है। |
| एक्सपैंडेड | 840–1199 | दो पेन, जैसे सूची और विवरण। स्थायी नेविगेशन। |
| लार्ज | 1200–1599 | दो या तीन पेन। टेक्स्ट की चौड़ाई विंडो से नहीं, पंक्ति की लंबाई से सीमित होती है। |
| एक्स्ट्रा-लार्ज | 1600 और उससे ऊपर | लार्ज जैसा ही, खुले मार्जिन के साथ; कॉन्टेंट को जगह भरने के लिए न खींचें। |

चौड़ाई डेंसिटी से स्वतंत्र इकाइयों में है: वेब पर CSS पिक्सल, Apple प्लैटफ़ॉर्म पर पॉइंट, Android पर dp, Flutter में लॉजिकल पिक्सल।

## क्लास के बीच ढलना

जब लेआउट किसी सीमा को पार करे, तो उसे कुछ गिने-चुने, अनुमान लगाने लायक़ तरीक़ों में से किसी एक से बदलें:

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

तीन व्यवस्थाएँ ज़्यादातर स्क्रीन के लिए काफ़ी हैं: रिस्पॉन्सिव ग्रिड में कार्ड का **फ़ीड**, **सूची–विवरण**, और **सहायक पेन** के साथ कॉन्टेंट।

## स्पेसिंग

स्पेसिंग टोकन 8 यूनिट के आधार के गुणज और अंश हैं। टोकन के नाम की संख्या उस आधार का प्रतिशत है, इसलिए `space100` 8 है, `space50` 4 है और `space200` 16 है।

| टोकन | मान | प्रीव्यू |
| --- | --- | --- |
| `--tanrei-sys-space-space0` | 0px |  |
| `--tanrei-sys-space-space25` | 2px |  |
| `--tanrei-sys-space-space50` | 4px |  |
| `--tanrei-sys-space-space75` | 6px |  |
| `--tanrei-sys-space-space100` | 8px |  |
| `--tanrei-sys-space-space125` | 10px |  |
| `--tanrei-sys-space-space150` | 12px |  |
| `--tanrei-sys-space-space175` | 14px |  |
| `--tanrei-sys-space-space200` | 16px |  |
| `--tanrei-sys-space-space250` | 20px |  |
| `--tanrei-sys-space-space300` | 24px |  |
| `--tanrei-sys-space-space400` | 32px |  |
| `--tanrei-sys-space-space450` | 36px |  |
| `--tanrei-sys-space-space500` | 40px |  |
| `--tanrei-sys-space-space600` | 48px |  |
| `--tanrei-sys-space-space700` | 56px |  |
| `--tanrei-sys-space-space800` | 64px |  |
| `--tanrei-sys-space-space900` | 72px |  |

इससे जनरेट किया गया: `design/tokens/tanrei.light.tokens.json`, `tokens/sys/space.tokens.json`

छोटे स्टेप कंपोनेंट के भीतर, स्केल का बीच का हिस्सा कंपोनेंट के बीच, और बड़े स्टेप सेक्शन के बीच इस्तेमाल करें। टच टार्गेट के बीच की स्पेसिंग कभी `space100` से कम नहीं होती।

## टेक्स्ट की चौड़ाई

चलते टेक्स्ट को मोटे तौर पर 45 से 80 अक्षर प्रति पंक्ति के बीच रखें। लार्ज और एक्स्ट्रा-लार्ज विंडो पर टेक्स्ट कॉलम की सीमा तय करें और बची जगह मार्जिन या सहायक पेन को लेने दें।