Version 5.0.1

Responsive grid

A responsive grid allows a layout to change dynamically based on the size of the screen. This also guarantees consistent layouts across Adobe’s products.

Glossary#


[object Object]

Columns#

There are 12 columns in the responsive grid system. Column widths change with the size of the grid.

[object Object]

Gutters#

Gutters are the gaps between the columns. Gutter widths are fixed values (16 px, 24 px, etc.) based on breakpoints.

[object Object]

Grid margins#

Grid margins are the outer margins of the grid. They can be the same width as the gutters or greater.

[object Object]

Layout regions#

Areas of the layout that contain the content. Layout regions can span over any number of columns and resize with the grid.

Grid types#


Fluid#

The fluid grid is designed for complex screens and web applications as it uses 100% of the screen’s width. The large and high-definition fluid grids allow for maximum use of screen real estate, and is best used for application workflows and UI.

Fixed#

The fixed grid has a maximum width and is designed for simple screens and content-specific pages. The width allows for maximum readability of page content in large and high-definition screens.

Breakpoints and dimensions#


Minimum WidthBreakpoint# ColumnsGuttersFluid Grid WidthFixed Grid Width
Below 304 pxXXS1216 px304 px, horizontal scroll304 px, horizontal scroll
304 pxXS1216 px100%100%
768 pxS1224 px100%100%
1280 pxM1232 px100%1280 px, centered
1768 pxL1240 px100%1280 px, centered
2160 px and aboveXL1248 px100%1280 px, centered

Responsive scaling#

Breakpoints are defined as min-width attributes. This means that screen sizes in between two defined breakpoint dimensions will inherit all dimensions of the breakpoint of smaller size.

Column widths are fluid and equate to 8.33% width of the grid.

Column spanning and offsets#


Column spanning#

Layout regions can span any number of columns and are separated by the grid gutter. Layouts can change at any of the designated breakpoints, however custom breakpoints for layout changes are OK.

Diagram showing the ability to use layout regions that span all 12 columns, 6 columns, 4 columns, or 3 columns.

Offset layouts#

The page content does not always need to span across 12 columns; it can occupy a smaller region in the center of the page. This example shows a 12-column layout region with an offset of 2 columns on both sides, resulting in a column span of 8.

Diagram showing that not all layout regions need to span the full 12 columns, but can be offset, leaving some columns blank on the outer edges. For example, a layout region and be offset two columns on each side, and only span 8 columns.

Layout regions#


Layout regions are loose regions defined by the designer and allow for responsive layouts. Widths are defined by the number of columns they span at each breakpoint, which allows for layouts to change and optimize for any screen size.

Example of a layout region with a text field and two buttons illustrating no internal spacing.

Layout within a region#

Layout regions do not have any internal spacing. At minimum, they are equal in height to the components comprised within them.

Image illustrating the spacing between layout regions which should be equal to the gutter width of the page.

Layout between regions#

Use the gutter width to help determine the space between layout regions. This space can be larger or smaller to help group regions hierarchically on the page.

Grid with panels or rails#


Rails and panels offset the responsive grid by the width of the component. For viewports smaller than 1280 px, expanded rails and panels overlay the responsive grid, rather than offsetting it. Rails and panels are components; therefore, they do not adhere to or use the responsive grid to align elements within them. Rails and panels are spatially separated from the responsive grid columns by the width of the grid margins.

Offsetting the grid#

The responsive grid typically fills 100% of the viewport. When rails or panels are present, the grid fills 100%, minus the width of the rails or panels.

For example, on a screen with a collapsed left rail, the responsive grid will be 100% - 48 px, with the offset on the left to account for the rail.

These basic examples show how the responsive grid resizes to fit within the containing area of the page when a variety of rails or panels are used. For more grid variations, download the Responsive-Grid.xd file.

Image illustrating how the columns respond when panels or rails are present in the layout.

Usage guidelines#


Don't align every component to the responsive grid#

The responsive grid is for creating layouts that adapt or change to accommodate various viewport sizes. Layout regions are the only aspect of your design that should align to the responsive grid. If you try to align and implement individual elements to the responsive grid, you will compromise the design of the elements and their behavior.

Key example of a layout region aligning to columns in the responsive grid.
Example of individual components incorrectly aligning to columns in the responsive grid.

Mind the gaps#

The grid gutters are there to create spacing between your layout regions. Do not extend your layout regions into the gutters; each layout region should span from the outer edges of the columns they cover.

Example of a layout region incorrectly filling the gutters, rather than using the gutters for the spacing on either side of the layout region.

Panels and rails#

The templates include variations that account for placement of left or right panels and rails. Since panels and rails are fixed elements, they do not adhere to the 12-column responsive grid.

Image showing a side bar, and how it does not adhere to the column grid, and the column grid fills the rest of the given space.

Don't modify the templates#

Find the right template based on your basic page layout and viewport size. The templates have been designed with the gutter sizes at each breakpoint and for default XD artboard sizes. Creating your own template, or scaling an existing template could result in inaccuracies in the design and its implementation.

Image showing a mouse cursor incorrectly manipulating the width of the columns.

Changelog#


DateNumberNotes
Nov 18, 20195.0.1

Updated design file to correct a few margin errors.

Nov 18, 20195.0.1
  • Updated design file to correct a few margin errors.
Apr 19, 20195.0.0
  • This part of Spectrum is now individually versioned (individual versions of existing items start at 5.0.0)