FigmaUse the layout grid for organizing space, text, images, and other elements used in design. Following a grid while designing user interfaces (UI) provides consistent design across various screen sizes.
The design system utilizes a responsive 12-column layout grid.
Terms
There are 12 columns in the responsive grid. Column widths change with the size of the grid.
Gutters are the gaps between columns. Gutter widths are a fixed value of 16px (--spacer-2).
Gutter margins are the outer margins of the grid. From 0-543px the grid margins are 16px (--spacer-2) from 544px (small breakpoint) and up the grid margins are 32px (--spacer-4).
Areas of the layout that contain the content. Layout regions can span any number of columns and resize with the grid.The grid consists of three distinct pieces:
- Containers add a maximum width and centers the content
- Rows enable layout and contains the columns
- Columns determine the number of columns an item will span across, out of a possible 12 per row
Examples
Default behavior
Columns without a set width will automatically layout with equal widths. The columns will automatically wrap when they don't fit a single row.
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.
Specify the number of columns (1-12) to span using .ds-l-col--* classes. These classes will span * columns. So, if you want two elements that each span half the row, you would use .ds-l-col--6
Natural width columns
Use a .ds-l-col--auto class to size a column to the natural width of its content.
Nested grids
Offsetting columns
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 an 8-column layout region with an offset of 2 columns on both sides.
Offset columns using the margin auto utility class:
Alignment
Align columns horizontally or vertically using flexbox utility classes. To align columns horizontally, use the justify-content utility class. To align columns vertically, use the align-items utility class.
Form rows
Use a .ds-l-form-row class to tighten the column spacing when laying out form fields in a grid.
Responsive grids
Use a breakpoint prefix to change the column widths based on the viewport width.
Responsive format: .ds-l-[breakpoint]-col--*
In the example below, the cells span:
- 6 cells per row on
xlviewports, using.ds-l-xl-col--2 - 4 cells per row on
lgviewports, using.ds-l-lg-col--3 - 3 cells per row on
mdviewports, using.ds-l-md-col--4 - 2 cells per row on
smviewports, using.ds-l-sm-col--6 - The entire width of the row on viewports smaller than the
smbreakpoint, using.ds-l-col--12
Guidance
Best practices
- Choose a single grid system for the entire site.
- Consider small screens as part of the design process and create layouts that adapt or change to accommodate various viewport sizes as needed.
- Use layout regions to section page content.
- Grid gutters are there to create spacing between the layout regions. Do not extend the layout regions into the gutters.
When to use
- Use to place UI elements into consistent responsive columns and page layouts.
When to consider alternatives
- Avoid mixing this grid and other grid systems.
Usage
- Choose a 12-column grid with flexible column widths and fixed gutters.
- Avoid text lines longer than 75 characters. Place text in narrower columns to keep text lines from becoming too wide or use the measure utility classes.
Accessibility
- Low-vision users should be able to increase the size of the text by up to 200 percent without breaking the layout.
- The DOM order and visual presentation of content should be consistent, in order to not break keyboard navigation. This means you should avoid changing the flexbox
orderproperty of the grid columns. - Consider the main goal, purpose, and user task of the page/workflow when deciding which page content area to span and ensure the layout supports user who many have cognitive delay or low literacy.
- Follow the grid consistently to help support the brain while skimming and scanning and reduce cognitive load when trying to make sense of an inconsistently layout experience.
- Ensure primary interaction elements like call to action buttons appear in similar location to reduce the amount of time it takes users to select thees elements and reduced the time to locate these elements.
Sass Variables
The following Sass variables are available in the dist/scss folder:
$grid-columns$grid-gutter-width