# Grids

<br />

A grid view displays two or more columns of images representing content items, with brief text beneath each image. This view is best when users rely primarily on images to make their selections.

Grids are vertically scrollable and can vary in size, spacing, and number of columns. The content in the grid can also be grouped into categories.
[![callout icon](https://developers.google.com/static/cars/design/common/images/default.svg)
List items component Lists provide an alternative way to display content that requires more explanatory text](https://developers.google.com/cars/design/automotive-os/components/list-items)

*** ** * ** ***

## Anatomy

Grids contain text and UI controls. Because users must respond to them, they should never be obscured, either by other elements or by the screen edge.
![](https://developers.google.com/cars/design/automotive-os/components/images/grid-anatomy-1.png)
1. Grid item
2. Primary and secondary text
3. Grid background

*** ** * ** ***

## Specs

[![callout icon](https://developers.google.com/static/cars/design/common/images/default.svg)
Layout labels Definitions of E, M, KL, P, Flex](https://developers.google.com/cars/design/intro-terms#layout_labels) [![callout icon](https://developers.google.com/static/cars/design/common/images/default.svg)
List items component Specs, style guidelines, and more](https://developers.google.com/cars/design/automotive-os/components/list-items)

### Content grid (3 or 4 columns)

![](https://developers.google.com/cars/design/automotive-os/components/images/grid-spec-1.png)

### App grid (4 columns)

![](https://developers.google.com/cars/design/automotive-os/components/images/grid-spec-2.png)

### App grid with frequently used items in top row

![](https://developers.google.com/cars/design/automotive-os/components/images/grid-spec-3.png)

### Indicator icon placement in grid layout

![](https://developers.google.com/cars/design/automotive-os/components/images/grid-spec-4.png)

*** ** * ** ***

## Scaling layouts

These reference layouts show how to adapt grids to accommodate screens of various widths and heights. (Width and height categories are defined in the [Layout](https://developers.google.com/cars/design/automotive-os/design-system/layout) section.) Note that all pixel values are in rendered pixels, before any down-sampling or up-sampling occurs.
[![callout icon](https://developers.google.com/static/cars/design/common/images/default.svg)
Layout Margins, keylines, and padding for various screen sizes](https://developers.google.com/cars/design/automotive-os/design-system/layout) [![callout icon](https://developers.google.com/static/cars/design/common/images/default.svg)
Layout labels Definitions of E, M, KL, P, Flex](https://developers.google.com/cars/design/intro-terms#layout_labels)

### Standard-width screens

![](https://developers.google.com/cars/design/automotive-os/components/images/grid-ar-1.png)

### Wide screens

![](https://developers.google.com/cars/design/automotive-os/components/images/grid-ar-2.png) For wide screens, a 3-column layout is recommended. If using a 4-column layout, maintain a minimum tile size of 219dp.

### Extra-wide and super-wide screens

![](https://developers.google.com/cars/design/automotive-os/components/images/grid-ar-3.png)

### Vertical spacing of app grids on screens of various heights

![](https://developers.google.com/cars/design/automotive-os/components/images/grid-ar-4.png) For short screens, vertical spacing should be reduced between grid content items and between app icons and titles.

*** ** * ** ***

## Styles

[![callout icon](https://developers.google.com/static/cars/design/common/images/default.svg)
Typography guidelines Scale and grid references, typographic examples, and more](https://developers.google.com/cars/design/automotive-os/design-system/typography) [![callout icon](https://developers.google.com/static/cars/design/common/images/default.svg)
Color guidelines Palettes, elevation and opacity values, and more](https://developers.google.com/cars/design/automotive-os/design-system/color)

### Typography

| Type style | Typeface | Weight | Size (dp) |
|---|---|---|---|
| Body 1 | Roboto | Regular | 32 |
| Body 2 | Roboto | Regular | 28 |
| Body 3 | Roboto | Regular | 24 |

### Color

| Element | Color(day mode) | Color (night mode) |
|---|---|---|
| Primary type / icons | White | White @ 88% |
| Secondary type / icons | White @ 72% | White @ 60% |
| Divider line | White @ 22% | White @ 12% |
| Grid background | Black | Black |
| Content scrim | N/A | Black @ 22% |
| Gradient truncate | Black @ 0-100% in 10% of text space | Black @ 0-100% in 10% of text space |

### Sizing

| Element | Size (dp) |
|---|---|
| App icon | 76 |
| Min app cell | 135 |
| Min content cell | 158 |

### Elevation

| Element | Color | Y axis | Blur |
|---|---|---|---|
| Grid tile | Black @ 22% | 2 | 2 |

*** ** * ** ***

## Examples

![](https://developers.google.com/cars/design/automotive-os/components/images/grid-mock-2.png) App grid - day ![](https://developers.google.com/cars/design/automotive-os/components/images/grid-mock-1.png) App grid - night ![](https://developers.google.com/cars/design/automotive-os/components/images/grid-mock-3.png) Content grid - day ![](https://developers.google.com/cars/design/automotive-os/components/images/grid-mock-4.png) Content grid - night ![](https://developers.google.com/cars/design/automotive-os/components/images/grids-animation.gif) User drags upward or downward to scroll content