Grid

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

Viewport packages

In this Design Guide, we include recommendations that reference properties which are not part of core APL. These are available in the Viewport package, which is available for you to use. Please refer to the information on importing document properties for implementation details.

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.

Margins are 6.5% of the horizontal width, WIDTH/16 with the exception of hub, round, small which is VIEWPORT WIDTH/16*2 to accommodate the round shape of the viewport.

Device Class Viewport Width Calculation Margin
Hub, Round, Small 480 480/16*2 60
Hub, Landscape, Medium 1024 1024/16 64
Hub, Landscape, Large 1280 1280/16 80
TV, Landscape, X-Large 1920 1920/16 120

Usage

  • Margins are 6.25% of the device width in dp.
  • Margins are 12.5% for round devices.
  • Margins are fixed and will not change on devices that support multiple operations.

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.
  • Device Groupings are used to determine Grid Column count.
  • 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 screen width of 1024 dp and 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. 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.

Distance (feet) Distance Gutter size (minimum)
18 to 24in Close 18 dp
≥2ft to <5ft Near 24 dp
≥5ft to <7ft Midrange 32 dp
≥7ft Far 42 dp

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