Spectrum
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.
Table of contents#
Glossary#
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 width | Breakpoint | Number of columns | Gutters | Fluid grid width | Fixed grid width |
|---|---|---|---|---|---|
| Below 304 px | XXS | 12 | 16 px | 304 px, horizontal scroll | 304 px, horizontal scroll |
| 304 px | XS | 12 | 16 px | 100% | 100% |
| 768 px | S | 12 | 24 px | 100% | 100% |
| 1280 px | M | 12 | 32 px | 100% | 1280 px, centered |
| 1768 px | L | 12 | 40 px | 100% | 1280 px, centered |
| 2160 px and above | XL | 12 | 48 px | 100% | 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.
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.
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.
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.
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.
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.
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.
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.
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.
Changelog#
| Date | Number | Notes |
|---|---|---|
| Nov 19, 2019 | 5.0.1 |
|
| Apr 20, 2019 | 5.0.0 |
|
Application frame