The grid helps us achieve visual balance and makes the user interface easier to scan. With the grid we can create consistent layouts that work across devices, screen sizes, and environments.

Grid anatomy #

Grids in Nord Design System contain columns (1), gutters (2), and margins (3).

Grid anatomy

Columns #

Columns define the areas of a design that contain content. The column widths are defined by percentages, and will resize based on the viewport. The number of columns available will also be affected by the viewport. A general rule of thumb is to allow the content to determine the breakpoints and how many columns to show at each viewport size.

Grid colums

Gutters #

Gutters are fixed-width spacing between columns that separate content. We use our space tokens to define the gutters for the grid.

Grid gutters

Margins #

Margins separate content from the left and right edges of the grid. Margins are fixed-width and defined by using our space tokens. In general, wider margins are more suited for larger screens. Margins should either be the same width, or wider than the gutter width.

Grid margins

Applying the Grid #

Nord Design System offers options for customizing the grid. We support up to 12 column layouts that can be fixed or fluid.

Applying the grid

Layout across columns #

Content can span multiple columns or use a subset of columns in a grid.

Layout across columns

Gutter and margin spacing #

We offer three types of spacing for gutters and margins: S, L, and XL. These options align with our space tokens. Typically, larger spacing makes sense on larger screens.

Gutter and margin spacing

Fixed-width or fluid grid #

You can apply a fixed-width or a fluid grid to your design. The fixed-width grid works well when dealing with long pages of content (fixed grid behaves like fluid grid when the viewport is smaller than the grid’s max-width):

The fluid grid work well when you’re dealing with screens that require lots of interaction or large datasets:

Layout #

For laying out applications, we place navigation (2) on the left and page header (1) across the top of the screen. The grid is applied to the content area (3).


Figma usage #

You can find the different grids from our Figma Toolkit.

Getting support #

Have a question about grid usage? Please head over to the Support page for more guidelines and ways to contact us.

Was this page helpful?

Send feedback

We use this feedback to improve our documentation.

Edit page