Grid

The grid is a responsive, mobile first, fluid system that scales 12 columns across the viewport of a device. The grid is based on a 16 pixel uniform spacing structure that's used to appropriately arrange content into aligned columns and rows.

Anatomy

Breakpoints

See breakpoint support in web core style sheets

Columns, gutters, and margins scale as the device and viewport increases or decreases. Different breakpoints require either a fixed or fluid responsive grid.

• Fluid grid: A grid built using columns that are considered flexible. When the screen size is changed, the widths of these columns will adjust proportionally.
• Fixed grid: A grid built with columns that have a defined width. When the screen size is changed, the columns do not change their width.

Guidlines

Two grid sizes are available within the toolkit. Both grids are based on a 12 column structure, but have different gutter and margin sizes.

• For viewports larger than 1024 pixels, use the 32-pixel grid
• For viewports smaller than 1024 pixels, use the 16-pixel grid

• When building a design to be accessed on multiple viewports, always start with a phone or XS grid size. This will help you establish content hierarchy, layout, and design feasibility that you can apply later to larger-sized viewports.
• Design within artboards that represent our target device sizes:

Behavior

• Avoid breaking alignment or slightly oversizing a container to add visual interest or emphasis
• Create relationships and hierarchy among content elements using the margins and gutters in the grid shared by the page layout