ग्रिड के तौर पर देखें, तो कॉन्टेंट के आइटम को दिखाने वाली इमेज के दो या उससे ज़्यादा कॉलम दिखते हैं. इनमें हर इमेज के नीचे छोटा टेक्स्ट होता है. यह व्यू तब सबसे अच्छा लगता है, जब उपयोगकर्ता अपने विकल्प चुनने के लिए मुख्य रूप से इमेज पर भरोसा करते हैं.
ग्रिड को वर्टिकल स्क्रोल किया जा सकता है और उनके साइज़, स्पेस, और कॉलम की संख्या अलग-अलग हो सकती है. ग्रिड के कॉन्टेंट को कैटगरी में भी बांटा जा सकता है.
शरीर रचना
ग्रिड में टेक्स्ट और यूज़र इंटरफ़ेस (यूआई) कंट्रोल होते हैं. उपयोगकर्ताओं को उनका जवाब देना ज़रूरी है, इसलिए उन्हें कभी भी दूसरे एलिमेंट या स्क्रीन के किनारे से धुंधला नहीं करना चाहिए.
![](https://developers.google.cn/cars/design/automotive-os/components/images/grid-anatomy-1.png?authuser=6&hl=hi)
- ग्रिड आइटम
- प्राइमरी और सेकंडरी टेक्स्ट
- ग्रिड का बैकग्राउंड
खास जानकारी
कॉन्टेंट ग्रिड (तीन या चार कॉलम)
![](https://developers.google.cn/cars/design/automotive-os/components/images/grid-spec-1.png?authuser=6&hl=hi)
ऐप्लिकेशन ग्रिड (चार कॉलम)
![](https://developers.google.cn/cars/design/automotive-os/components/images/grid-spec-2.png?authuser=6&hl=hi)
सबसे ऊपर वाली लाइन में, अक्सर इस्तेमाल किए जाने वाले आइटम की जानकारी देने वाला ऐप्लिकेशन ग्रिड
![](https://developers.google.cn/cars/design/automotive-os/components/images/grid-spec-3.png?authuser=6&hl=hi)
ग्रिड लेआउट में इंडिकेटर आइकॉन की प्लेसमेंट
![](https://developers.google.cn/cars/design/automotive-os/components/images/grid-spec-4.png?authuser=6&hl=hi)
स्केलिंग लेआउट
ये रेफ़रंस लेआउट, अलग-अलग चौड़ाई और ऊंचाई वाली स्क्रीन को फ़िट करने के लिए ग्रिड को अपनाने का तरीका दिखाते हैं. (चौड़ाई और ऊंचाई की कैटगरी लेआउट सेक्शन में बताई गई हैं.) ध्यान दें कि डाउन-सैंपलिंग या अप-सैंपलिंग शुरू होने से पहले, सभी पिक्सल वैल्यू रेंडर किए गए पिक्सल में होती हैं.
मानक-चौड़ाई वाली स्क्रीन
![](https://developers.google.cn/cars/design/automotive-os/components/images/grid-ar-1.png?authuser=6&hl=hi)
चौड़ी स्क्रीन
![](https://developers.google.cn/cars/design/automotive-os/components/images/grid-ar-2.png?authuser=6&hl=hi)
ज़्यादा चौड़ी और सुपर वाइड स्क्रीन
![](https://developers.google.cn/cars/design/automotive-os/components/images/grid-ar-3.png?authuser=6&hl=hi)
अलग-अलग ऊंचाई की स्क्रीन पर ऐप्लिकेशन ग्रिड की वर्टिकल स्पेस
![](https://developers.google.cn/cars/design/automotive-os/components/images/grid-ar-4.png?authuser=6&hl=hi)
स्टाइल
टाइपाेग्राफ़ी
टाइप करने का स्टाइल | टाइपफ़ेस | वज़न | साइज़ (dp) |
---|---|---|---|
मुख्य भाग एक | Roboto | सामान्य | 32 |
मुख्य भाग 2 | Roboto | सामान्य | 28 |
मुख्य भाग 3 | Roboto | सामान्य | 24 |
रंग
एलिमेंट | कलर(दिन मोड) | कलर (नाइट मोड) |
---|---|---|
मुख्य टाइप / आइकॉन | सफ़ेद | सफ़ेद @ 88% |
सेकंडरी टाइप / आइकॉन | सफ़ेद @ 72% | सफ़ेद @ 60% |
डिवाइडर लाइन | सफ़ेद @ 22% | सफ़ेद @ 12% |
ग्रिड का बैकग्राउंड | काला | काला |
कॉन्टेंट स्क्रिम | लागू नहीं | काला @ 22% |
ग्रेडिएंट काटें | काला @ 0-100% टेक्स्ट स्पेस के 10% हिस्से में | काला @ 0-100% टेक्स्ट स्पेस के 10% हिस्से में |
साइज़ बदलना
एलिमेंट | साइज़ (dp) |
---|---|
ऐप्लिकेशन आइकॉन | 76 |
ऐप्लिकेशन की सबसे कम सेल | 135 |
कम से कम कॉन्टेंट सेल | 158 |
ऊंचाई
एलिमेंट | रंग | वाई ऐक्सिस | धुंधला करें |
---|---|---|---|
ग्रिड टाइल | काला @ 22% | 2 | 2 |
उदाहरण
![](https://developers.google.cn/cars/design/automotive-os/components/images/grid-mock-2.png?authuser=6&hl=hi)
![](https://developers.google.cn/cars/design/automotive-os/components/images/grid-mock-1.png?authuser=6&hl=hi)
![](https://developers.google.cn/cars/design/automotive-os/components/images/grid-mock-3.png?authuser=6&hl=hi)
![](https://developers.google.cn/cars/design/automotive-os/components/images/grid-mock-4.png?authuser=6&hl=hi)
![](https://developers.google.cn/cars/design/automotive-os/components/images/grids-animation.gif?authuser=6&hl=hi)