Grid

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.

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.

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.

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.

Note

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

Content Regions

Content regions are separated by gutters and can span several 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.

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.

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.

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

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