Layout

Columns may vary in width at different points within each breakpoint range but are always equal to each other. Content should be contained within the columns, but effects like shadows and hovers can expand into the margins or gutters.

Gutter widths are fixed within each breakpoint range. This provides a consistent visual order and prevents content overlap. Do not extend content into the gutters to keep spacing consistent. If additional horizontal space is needed between elements, increase the padding, not the gutter-width.

Margins provide the white space beyond the content area and contribute to the comfort of the page. Margins provide a visual frame and prevent content from spilling over the viewable regions. Each breakpoint has specific margin widths and scale as the viewport shifts from one breakpoint to the next.

Mix and match column widths by spanning multiple columns for a wide variety of layout options. For more information, see Column Control options.

In responsive design, a breakpoint is the mark at which a website’s content and design will change to provide the optimal user experience within a given viewport range.

The responsive grid adjusts margin, body widths, and the number of columns when scaling a layout for different viewport ranges.

The X-Small, Small, and Medium breakpoints use a fluid grid, meaning the grid spans 100% of the viewport width and column widths are defined in percentages, adjusting in size as the screen size changes. The margins are set to fixed pixel sizes based on the viewport size.

However, at the Large breakpoint (1440px and above), the grid becomes fixed, with the content area fixed at 1200px. The margins are set to 'Auto,' meaning they will simply fill any additional space beyond the fixed 1200px content area. This prevents components from becoming excessively large on ultra wide displays.

In the example below, you can see how a Content Group - Cards component would reflow its content across various breakpoints.

In this example, the cards within the three-column (33%, 33%, 33%) layout stack to a single column on tablet and mobile devices.

The Keystone spacing scale complements the layout grid and typography scale by using multiples of two, four, and eight. It includes both small increments needed to create appropriate spatial relationships for detail-level designs as well as larger increments used to control the density of a design.

Each level of the spacing scale has its own token. Spacing tokens can be used inside of components for building and between components for layout spacing.