Use 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.
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
The grid system utilizes breakpoints to adapt designs at various viewport sizes.
Columns without a set width will automatically layout with equal widths. The columns will automatically wrap when they don't fit a single row.
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
Natural width columns
.ds-l-col--auto class to size a column to the natural width of its content.
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:
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.
.ds-l-form-row class to tighten the column spacing when laying out form fields in a grid.
Use a breakpoint prefix to change the column widths based on the viewport width.
In the example below, the cells span:
- 6 cells per row on
- 4 cells per row on
- 3 cells per row on
- 2 cells per row on
- The entire width of the row on viewports smaller than the
- 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.
- 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.
- 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.
The following Sass variables can be overridden to customize the grid: