Grid

The new grid system establishes a more responsive and versatile 12-column grid, built upon a 4 by 4 pixel baseline. This grid allows the flexibility to divide content into 1, 2, 3, 4, and 6 columns, with options to make layouts more symmetrical, while also remaining responsive.

Most breakpoints are designed using the 12-column grid, except for XS (extra small) breakpoint ranges of 320 to 479 pixels and S (small) breakpoints of 480 to 767 pixels, which use the 2 and 6-column grid below.

The number of columns displayed in a grid is determined by the viewport range. When designing for breakpoint ranges of 479 pixels and below (XS), the grid automatically adjusts to 2-columns.

When designing for a breakpoint range of 480 to 767 pixels (S), the grid automatically adjusts to a 6-column grid.

There are four elements that make up the grid:

• Columns for content placement
• Gutters to separate columns and content
• Margins that define the left and right edges of the screen
• Rows that contain content vertically

Column widths are percentage-based and defined by viewport size, allowing content to adapt to the screen size. Columns may vary in width at different points within each breakpoint range but are always equal to each other. Content should be contained within the columns, but effects like shadows and hovers can expand into the margins or gutters.

Mix and match column widths by spanning multiple columns for a wide variety of layout options.

Make sure the content spans all of the columns in the layout (whether it is 2, 6, or 12 columns), rather than using columns as margins or padding. Following this methodology will keep layouts uniform and prevent unreliable responsive behavior.

Gutter widths are fixed within each breakpoint range. This provides a consistent visual order and prevents content overlap. Do not extend content into the gutters to keep spacing consistent. If additional horizontal space is needed between elements, increase the padding, not the gutter-width, or choose the “comfortable density” grid.

Margins provide the white space beyond the content area and contribute to the comfort of the page. Margins provide a visual frame and prevent content from spilling over the viewable regions. Each breakpoint and density level has specific margin widths and scale as the viewport shifts from one breakpoint to the next.

Some experiences require different grids and margins for side navigation or other fixed elements that live outside the main content area. Remember, fixed element widths must have a pixel width divisible by 4. Margin examples are featured below.

Density describes the overall proximity of page elements to each other. Margins and gutters expand or contract based on density level. Likewise, as windows increase and decrease in size, content density is also impacted. For example, more white space or legibility is needed but there are space constraints, choose the “comfortable” grid. Use any of the three density levels, but for consistency it is recommended to use the same density grid across the entire experience.

• Compact accommodates heavier content, like lists and tables, by allowing more information to fit on a single screen.
• Default is optimal for most experiences.
• Comfortable provides more white space. This is ideal for drop-down menus, pickers, alerts, and dialogs.

There are a few primary units in the vertical spacing guidelines:

• element height
• space between elements
• text line height

All of these values should be multiples of 4 pixels. Vertical spacing between all other elements, such as text objects and form inputs, should also be in multiples of 4 pixels.

In responsive design, a breakpoint is the mark at which a website’s content and design will change to provide the optimal user experience within a given viewport range.

The responsive grid adjusts margin, body widths, and the number of columns when scaling a layout for different viewport ranges. The breakpoints have been designed “up” for larger viewport ranges, rather than “down” to accommodate the smallest viewports.

Viewport range: 320 to 479 pixels, T-shirt size: XS, Grid: 2-columns

Viewport range: 480 to 767 pixels, T-shirt size: S, Grid: 6-columns

Viewport range: 768 to 1023 pixels, T-shirt size: M, Grid: 6-columns

Viewport range: 1024 to 1365 pixels, T-shirt size: L, Grid: 12-columns

Viewport range: 1366 to 1583 pixels, T-shirt size: XL, Grid: 12-columns

Viewport range: 1584 to 1919 pixels, T-shirt size: 2XL, Grid: 12-columns

Viewport range: 1920 to 2549 pixels, T-shirt size: 3XL, Grid: 12-columns

Viewport range: 2550 to 3839 pixels, T-shirt size: 4XL, Grid: 12-columns

Viewport range: 3840+ pixels, T-shirt size: 5XL, Grid: 12-columns