Grids

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.


Anatomy

Dialogs 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.

  1. Grid item
  2. Primary and secondary text
  3. Grid background

Specs

Content grid (3 or 4 columns)

App grid (4 columns)

App grid with frequently used items in top row

Indicator icon placement in grid layout


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 section.) Note that all pixel values are in rendered pixels, before any down-sampling or up-sampling occurs.

Standard-width screens

Wide screens

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

Vertical spacing of app grids on screens of various heights

For short screens, vertical spacing should be reduced between grid content items and between app icons and titles.

Styles

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

App grid - day
App grid - night
Content grid - day
Content grid - night
User drags upward or downward to scroll content