foundations icon

Grid

The grid is the structural foundation of all visual elements, from typography to columns, boxes, icons, and illustrations. It provides structure and guidance for all creative decision-making. It also supports content, and provides a consistent, repeatable, and responsive framework for design.


Status

PublishedElement can be used in production
Adobe XD
Adobe XD Kit
In backlogElement is in backlog
PublishedElement can be used in production
Documentation
PublishedElement can be used in production

What's new

The new grid system establishes a more responsive and versatile 12-column grid, built upon a 4 by 4 pixel baseline. This grid allows the flexibility to divide content into 1, 2, 3, 4, and 6 columns, with options to make layouts more symmetrical, while also remaining responsive.

Baseline grid

4-pixel grid

The 4-pixel grid is the Dell Design System standard. The recommended space between every element should be a multiple of 4 pixels, horizontally and vertically. Designing with a 4-pixel grid provides more flexibility and granularity for things like spacing text and icons.

By using multiples of 4 (8 and 12 pixels) in the baseline grid, a designer will have the flexibility to size margins and padding for a variety of elements, like typography and components.

By using multiples of 4 (8 and 12 pixels) in the baseline grid, a designer will have the flexibility to size margins and padding for a variety of elements, like typography and components.

12-column grid

Most breakpoints are designed using the 12-column grid, except for XS (extra small) breakpoint ranges of 320 to 479 pixels and S (small) breakpoints of 480 to 767 pixels, which use the 2- and 6-column grids below.

Standard 12-column grid with margins and placeholder content spaced across the columns and gutters of the grid.

Standard 12-column grid with margins and placeholder content spaced across the columns and gutters of the grid.

2-column grid

The number of columns displayed in a grid is determined by the viewport range. When designing for breakpoint ranges of 479 pixels and below (XS), the grid automatically adjusts to 2-columns.

An example of an XS, 2-column grid and how content might appear across the screen.

An example of an XS, 2-column grid and how content might appear across the screen.

6-column grid

When designing for a breakpoint range of 480 to 767 pixels (S), the grid automatically adjusts to a 6-column grid.

A 6-column grid for S breakpoints, featuring an example of how content might be spaced across the screen.

A 6-column grid for S breakpoints, featuring an example of how content might be spaced across the screen.

Grid elements

There are four elements that make up the grid:

  • Columns for content placement
  • Gutters to separate columns and content
  • Margins that define the left and right edges of the screen
  • Rows that contain content vertically

Column width

Column widths are percentage-based and defined by viewport size, allowing content to adapt to the screen size. Columns may vary in width at different points within each breakpoint range, but are always equal to each other. Content should be contained within the columns, but effects like shadows and hovers can expand into the margins or gutters.

Column layout span

Mix and match column widths by spanning multiple columns for a wide variety of layout options.

An example of how a designer may vary columns of content or containers across a 12-column grid layout within a page.

An example of how a designer may vary columns of content or containers across a 12-column grid layout within a page.

  1. Two columns, spaced equally across a layout.
  2. Three columns, spaced equally.
  3. Four columns, spaced equally.
  4. Six columns, spaced equally.
  5. Two columns of unequal width: one that spans three-fourths of the page, and the other spanning one fourth of the page.

Grid best practices

Make sure the content spans all of the columns in the layout (whether it is 2, 6, or 12 columns), rather than using columns as margins or padding. Following this methodology will keep layouts uniform and prevent unreliable responsive behavior.

In this example, a designer has spaced content in the center of the page, relying on grid columns for margins, instead of the actual margins. This will disrupt the responsiveness of the content on screen.

In this example, a designer has spaced content in the center of the page, relying on grid columns for margins, instead of the actual margins. This will disrupt the responsiveness of the content on screen.

Gutter size

Gutter widths are fixed within each breakpoint range. This provides a consistent visual order and prevents content overlap. Do not extend content into the gutters to keep spacing consistent. If additional horizontal space is needed between elements, increase the padding, not the gutter-width, or choose the “comfortable density” grid.

A sample design, showing how the designer might use gutters in the 12-column grid to layout and create margins between columns of content.

A sample design, showing how the designer might use gutters in the 12-column grid to layout and create margins between columns of content.

Margins

Margins provide the white space beyond the content area and contribute to the comfort of the page. Margins provide a visual frame and prevent content from spilling over the viewable regions. Each breakpoint and density level has specific margin widths and scale as the viewport shifts from one breakpoint to the next.

Side rail grids

Some experiences require different grids and margins for side navigation or other fixed elements that live outside the main content area. Remember, fixed element widths must have a pixel width divisible by 4. Margin examples are featured below.

 Side navigation in its collapsed and expanded state pushes the grid and margins to the right, so that all content is visible.

Side navigation in its collapsed and expanded state pushes the grid and margins to the right so all content is visible.

Density

Density describes the overall proximity of page elements to each other. Margins and gutters expand or contract based on density level. Likewise, as windows increase and decrease in size, content density is also impacted. For example, more white space or legibility is needed but there are space constraints, choose the “comfortable” grid. Use any of the three density levels, but for consistency it is recommended to use the same density grid across the entire experience.

  • Compact accommodates heavier content, like lists and tables, by allowing more information to fit on a single screen.
  • Default is optimal for most experiences.
  • Comfortable provides more white space. This is ideal for drop-down menus, pickers, alerts, and dialogs.
Grid density options: The compact grid has smaller margins and narrower gutters than the default grid. The comfortable grid has the widest gutters and margins.

Grid density options: The compact grid has smaller margins and narrower gutters than the default grid. The comfortable grid has the widest gutters and margins.

Vertical spacing

There are a few primary units in the vertical spacing guidelines:

  • element height
  • space between elements
  • text line-height

All of these values should be multiples of 4 pixels. Vertical spacing between all other elements, such as text objects and form inputs, should also be in multiples of 4 pixels.

An example of how using a multiple of 4 pixels (12 pixels) can be used for vertical margins between typography and buttons.

An example of how using a multiple of 4 pixels (12 pixels) can be used for vertical margins between typography and buttons.

Breakpoints

In responsive design, a breakpoint is the mark at which a website’s content and design will change to provide the optimal user experience within a given viewport range.

The responsive grid adjusts margin, body widths, and the number of columns when scaling a layout for different viewport ranges. The breakpoints have been designed “up” for larger viewport ranges, rather than “down” to accommodate the smallest viewports.

Viewport range: 320 to 479 pixels, T-shirt size: XS, Grid: 2-columns

DensityGuttersMargins
Compact8px16px
Default16px16px
Comfy24px24px

Viewport range: 480 to 767 pixels, T-shirt size: S, Grid: 6-columns

DensityGuttersMargins
Compact8px16px
Default16px16px
Comfy24px24px

Viewport range: 768 to 1023 pixels, T-shirt size: M, Grid: 6-columns

DensityGuttersMargins
Compact16px24px
Default16px32px
Comfy24px40px

Viewport range: 1024 to 1365 pixels, T-shirt size: L, Grid: 12-columns

DensityGuttersMargins
Compact16px32px
Default16px40px
Comfy24px48px

Viewport range: 1366 to 1583 pixels, T-shirt size: XL, Grid: 12-columns

DensityGuttersMargins
Compact16px32px
Default16px48px
Comfy24px56px

Viewport range: 1584 to 1919 pixels, T-shirt size: 2XL, Grid: 12-columns

DensityGuttersMargins
Compact16px48px
Default24px64px
Comfy32px80px

Viewport range: 1920 to 2549 pixels, T-shirt size: 3XL, Grid: 12-columns

DensityGuttersMargins
Compact24px48px
Default32px72px
Comfy46px96px

Viewport range: 2550 to 3839 pixels, T-shirt size: 4XL, Grid: 12-columns

DensityGuttersMargins
Compact32px64px
Default40px96px
Comfy56px128px

Viewport range: 3840+ pixels, T-shirt size: 5XL, Grid: 12-columns

DensityGuttersMargins
Compact40px96px
Default48px128px
Comfy64px160px

Storybook demos

Vanilla grid demo

View the grid demo and code in Vanilla.

Web Components grid demo

View the grid demo and code for Web Components.

React grid demo

View the grid demo and code in React.

Resources

Hello 4-pixel grid article

Using multiples of 4 to get more flexibility in your UI.

Feedback