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.


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.

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


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.



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


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


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


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


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