Grid
When designing your experience, using a grid can help you create a consistent customer experience with your layout.
The design recommendations in the guide reference the Viewport Profiles Package, which is an additional set of properties that you will need to import to use in your skill. Check out Alexa Viewport Profiles Package for more information.
Grid elements
A grid consists of 3 elements:
- Margins
- Columns
- Gutters
Margins
Margins are the space between the left and right edges of the device. Margins are used to separate content from the edge of the display which improves its readability.
| Device Class | Viewport Width (dp) | Margin (dp) |
|---|---|---|
| Hub, Round, Small | 480 | 64 |
| Hub, Landscape, Medium | 1024 | 64 |
| Hub, Landscape, Large | 1280 | 80 |
| TV, Landscape, X-Large | 960 | 48 |
Columns
Columns are used as guidelines for the consistent placement of content. Device Groupings can be used as a guideline to help you set the column count for your grid.
Usage
- Device width in DP is used to determine a Breakpoint.
- Column count is not fixed (columns can be added or dropped when a device is rotated).
| Breakpoint | Extra Small | Small | Medium | Large | Extra Large |
|---|---|---|---|---|---|
| Grid Columns | 4 | 8 | 12 | 12 | 12 |
Example: A Hub with a Medium breakpoint would use a 12 column grid.
Small 4-column on a Hub
Medium 8-column on a Hub
Large 12-column on a TV
Gutters
Gutters are the spaces between columns in the Grid. The size of the gutter is determined by the viewing distance of the device mode. Content that is intended to be viewed from further away requires a larger gutter to separate content and improve the readability of content at a distance.
| Device mode | Gutter size |
|---|---|
| Hub | 32dp |
| TV | 16dp |
Examples
Hub, Landscape, Large
With a horizontal image list aligned to a 12 column grid.
Hub, Landscape, Large:
With a horizontal image list aligned to a 12 column grid.
