Gracias por tu visita. Esta página solo está disponible en inglés.

Grid

When designing your experience, using a grid can help you create a consistent customer experience with your layout.

Viewport Profiles Package

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:

  1. Margins
  2. Columns
  3. Gutters
An image of a grid with elements callouts.

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.

A grid showcasing the 5 sizes (xs, s, m, lg, xl) from left to right and number of columns allowed.


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

Layout of redlines indicating column spacing across the page for a small hub device

Medium 8-column on a Hub

Layout of redlines indicating column spacing across the page for a medium hub device

Large 12-column on a TV

Layout of redlines indicating column spacing across the page for 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.

12 column grid layout across a large screen in landscape mode

Hub, Landscape, Large:
With a horizontal image list aligned to a 12 column grid.

12 column grid layout across a large screen in landscape mode

Additional resources


Back to top