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.
There are 12 columns in the responsive grid system. Column widths change with the size of the grid.
Gutters are the gaps between the columns. Gutter widths are fixed values (16 px, 24 px, etc.) based on breakpoints.
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.
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.
|Minimum Width||Breakpoint||# 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|
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.
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.
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 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 regions do not have any internal spacing. At minimum, they are equal in height to the components comprised within them.
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.
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.
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.
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.
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.
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.
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.
|Nov 18, 2019||5.0.1|
Updated design file to correct a few margin errors.
|Nov 18, 2019||5.0.1|
|Apr 19, 2019||5.0.0|