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.
Grid types#
Breakpoints and dimensions#
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#
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.
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.
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#
- Updated design file to correct a few margin errors.
- This part of Spectrum is now individually versioned (individual versions of existing items start at 5.0.0)