Grid

Grid guidelines to ensure layouts are consistent across all Enterprise Digital products.

info icon

Note

Currently, EDDS does not offer a Grid framework. It is the responsibility of the product team to build layout, using EDDS Grid and Spacing best practices.

Types

There are two types of grids that can be used for layout depending on your content needs.

Fixed-Width

In a Fixed-Width Grid, a maximum width is determined. Columns within a Fixed-width Grid are fluid and depending on the breakpoint range, the number of columns available will change.

Fixed-width layouts are very common across the web and are typically used for layouts like landing pages, informational pages or layouts that don’t need to fill up the space for optimal use.

A grid that has a max width of 1280. A grid that has a max width of 1280.
Viewport Width Columns Grid Container Max-width
Less than 768px (48rem) 4 100%
768 - 1024 8 100%
Greater than 1024px (64rem) 12 1280px (80rem)

Full-Width

Full-width Grids expand 100% of the viewport. Columns within a Full-width Grid are fluid and depending on the breakpoint range, the number of columns available will change.

Common Full-width layouts are dashboards, portfolios, or any layout that is content heavy and needs to make use of the whole space.

A grid that expands the full width of the browser. A grid that expands the full width of the browser.
Viewport Width Columns Grid Container Width
Less than 768px (48rem) 4 100%
768 - 1024 8 100%
Greater than 1024px (64rem) 12 100%

Visual Style

Grid Margins

Grid margins are units expressed as top, right, bottom and left margins that surround the perimeter of a grid’s container.

Top, right, bottom, and left spacing surrounding the perimeter of a grid container. Top, right, bottom, and left spacing surrounding the perimeter of a grid container.
Viewport Width Margin Top Margin Right Margin Bottom Margin Left
Less than 768px (48rem) 24px (1.5rem) 16px (1rem) 24px (1.5rem) 16px (1rem)
768 - 1024 32px (2rem) 24px (1.5rem) 32px (2rem) 24px (1.5rem)
Greater than 1024px (64rem) 48px (3rem) 24px (1.5rem) 48px (3rem) 24px (1.5rem)

Gutters

Gutters are spacing between columns and are expressed as margin values (not padding). We have provided a list of suggested spacing for gutters however, they can be modified to accommodate your content using the units provided in the Spacing guidelines.

info icon

Note

If items are interactive, they should maintain, at least, a total of 16px spacing between for optimal touch target spacing.

Spacing between grid columns. Spacing between grid columns.
Viewport Width Gutter
Less than 768px (48rem) 16px (1rem)
768 - 1024 16px (1rem)
Greater than 1024px (64rem) 24px (1.5rem)

Content Regions

Content regions are separated by gutters and can span several columns.

Content Regions spanning multiple grid columns. Content Regions spanning multiple grid columns.

Content Spacing

For information on how to space content within a content region, view our Spacing guidelines.

Usage

Column Spanning

Content regions can span single or multiple columns. Each content region must span to the edge of a grid column.

Content regions that span 1,2,3,4,6,8 or 12 columns. Content regions that span 1,2,3,4,6,8 or 12 columns.
A content region that is breaking the rules by overlapping the gutter areas. A content region that is breaking the rules by overlapping the gutter areas.
Never overlap gutters with content regions.
A content region that spans to the edge of a column. A content region that spans to the edge of a column.
Always span content regions to the edge of a column.

Offsetting

Content regions don’t have to span the full amount of columns available, they can be offset for content regions that need to occupy a smaller max-width.

For example, copy has optimal readability at 50-75 characters across. Because of this, you could offset the content region to center and span six columns.

A content region that spans six columns and is centered within the grid. A content region that spans six columns and is centered within the grid.

Behavior

Scrolling

It is required that content be presented without loss of information or functionality, and without forcing the user to scroll in two directions for: 

Vertical scrolling content at a (minimum) width equivalent to 320 CSS pixels,

Horizontal scrolling content at a (minimum) height equivalent to 256 CSS pixels.

The exception to this is content which requires vertical and horizontal scrolling for usage or meaning. An example would be a data table.

Responsive Reflow

When content adapts to the user’s browser, device, or preferences, it is important to make sure the visual order always matches the source code order of the content. This helps to provide Meaningful Sequence and provide an intuitive Focus Order.

Example

Elements A and B are rendered visually in the same order as the source code.

Two blocks (A,B) spanning 4 columns each, stacked side-by-side, on an 8 column grid. Two blocks (A,B) spanning 4 columns each, stacked side-by-side, on an 8 column grid.

The user changes the orientation on their device and block A and B switch order, which conflicts with the source code.

Two blocks (B, A) spanning 4 columns each, on a 4 column grid, stacked on top of each other in the wrong reflow order. Block B is incorrectly stacked on top of block A. Two blocks (B, A) spanning 4 columns each, on a 4 column grid, stacked on top of each other in the wrong reflow order. Block B is incorrectly stacked on top of block A.
Never change the visual and source code order across different views.

The user changes orientation on their device and elements A and B continue to render visually the same as the source code order.

Two blocks (A, B) spanning 4 columns each, on a 4 column grid, stacked on top of each other in the correct reflow order. Block A stacked on top of block B. Two blocks (A, B) spanning 4 columns each, on a 4 column grid, stacked on top of each other in the correct reflow order. Block A stacked on top of block B.
The visual and source code order should always match across all views.
↑ Back to top