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.
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
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.
Extra-wide and super-wide screens
Vertical spacing of app grids on screens of various heights
|Type style||Typeface||Weight||Size (dp)|
|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%|
|Content scrim||N/A||Black @ 22%|
|Gradient truncate||Black @ 0-100% in 10% of text space||Black @ 0-100% in 10% of text space|
|Min app cell||135|
|Min content cell||158|
|Grid tile||Black @ 22%||2||2|