Skip to main content

Grid

A grid adapts to screen size and orientation to help keep layouts consistent.

Guidelines​

Screen size is determined by the device and the user's window size. The EDS grid has three main content layouts that should cover all desktop, tablet and mobile needs adapting to different screen sizes and orientations.

Grid layouts​

  • It is the responsibility of the designer to define a maximum width and choose the correct grid.

  • It is up to the designer to make sure the design will scale correctly on all sizes. Start with a viewport that is the most common for the users. Make sure to test that the content will fit at smaller and larger viewports.

  • It is the responsibility of the developers to implement the maximum width and use the grid as designed.

Tip: Always remember to test designs and code by scaling the screen size or changing the orientation of the device.

Grid influencers​

When using a canvas navigation drawer or sidesheet, the content container could be resized. This will sometimes require a smaller grid to be used.

Styles​

Grid columns​

The columns used in the grid are fluid in width. There is not a defined width.

  • Grid/Large

    • Use in content areas that are between 840px and larger.

  • Grid/Medium

    • Use in content areas that are 600--839px.

  • Grid/Small

    • Use in content areas that are 0--599px.

Grid margins​

Grid margins are the space at the outer edge of the grid against the frame's edge. Grid styles are available with and without margins. It is up to the designer to decide which works best for your interface.

  • Grid/Large

    • Margins are set to 32px.

  • Grid/Medium

    • Margins are set to 24px.

  • Grid/Small

    • Margins are set to 16px.

Grid gutters​

Grid gutters are the space in between the columns of the grid.

  • Grid/Large

    • Gutters are set to 16px.

  • Grid/Medium

    • Gutters are set to 16px.

  • Grid/Small

    • Gutters are set to 8px.

  • Visit  for more details on on how to use the grid together with components.

Design

When expanded use tab to review current page headings and press enter or space to navigate to the selected section

DESIGN TOKENS

Grid

A grid adapts to screen size and orientation to help keep layouts consistent.

Figma​

How to add​

  1. Click A or Fon the keyboard to open the predefined list of frame sizes.

  2. Locate the Design tab in the Inspector Panel.

  3. Choose a frame preset by clicking on the preset name.

  4. With the artboard selected in the Layers panel, locate the Design tab in the Inspector Panel.

  5. Under the Layout grid section, open the Style library menu to view the grid styles.

  6. Choose a style by clicking on the style needed. Only one grid can be applied at a time.