Grid

A grid system in design is like a framework for a house. It brings order, consistency, and efficiency to the layout, helping organize content, align elements, and maintain a professional look. It's the invisible structure that makes a design visually appealing and easy to navigate.

Grid should be established before high fidelity design has been articulated.

Terminology

Container

The container represents the area the grid is being applied to.

Columns

Depending on viewport size, a layout will either use twelve or six equally sized columns.

Gutters

Gutter sizes vary based on breakpoint and use our four-pixel spacing increment.

Margins

In fluid layouts, outer margins are fixed in width, also using our four-pixel spacing increment.

Fluid Layout

Columns are fluid in width as the page container extends across the viewport.

Fixed Layout

The page container is fixed width and, most often, centered within the viewport.

Determining Grid Size

Most often, a grid is applied to an entire page. However, in some cases it can be limited to a larger subsection. For example, if ‌fixed-width navigation exists within a fluid layout.

Grids shouldn't be applied in a piecemeal fashion. Smaller page sections or regions should rely on basic position spacing mechanisms for layout.

Omitting the sidebar from this grid allows the panel to remain fixed while the rest of the page scales with the viewport.

Grid Levels

Viewport Breakpoints

Breakpoints represent opportunities to alter the design at specific viewport widths.

Breakpoint Ranges

When pressure testing a design, consider breakpoints for varying browser widths. Test both the minimum and maximum widths within each viewport range for optimal results.

Spacing

Applying meaningful and scalable margin, padding, and border radius values will create visual consistency and rhythm throughout an experience. Our four-pixel spacing increment ensures spacing between and within elements remains consistent and scalable.

Absolute spacing values must align to our base four pixel scale.