Overview
The layout grid contains three elements: columns, gutters, and margins.
Column
Columns are always the same width as one another. That width may vary within each breakpoint range. All content should fit within the columns.
Gutters
Columns have space between them. This defined spacing is called the gutter size. Gutter widths are set within each breakpoint range. This ensures that pages have a consistent visual rhythm. Content should not extend into the gutters. If you need more space between elements, increase padding instead of gutter width.
Margins
Margins create white space at the edges of the content area. They make it more comfortable to view a page. Each breakpoint has specific margin widths. These scale as the viewport shifts from one breakpoint to the next.
Responsive layouts
Breakpoints
Keystone Design System uses a responsive layout. This relies on the use of breakpoints. Breakpoints define how a page's content and design change for each viewport range.
The responsive grid adjusts based on these breakpoints. The column count, column widths, and margins scale for different viewport ranges. This design system includes four ranges: extra-small, small, medium, and large.
| Breakpoint | Range | Columns | Gutter | Margin |
|---|---|---|---|---|
| X-Small | 0 to 640px | 4 | 16px | 16px |
| Small | 641 to 991px | 8 | 16px | 24px |
| Medium | 992 to 1439px | 12 | 24px | 32px |
| Large | 1440px and up | 12 | 24px | Auto |
Fluid and fixed grids
We use a fluid grid for extra-small, small, and medium viewport ranges. This means that the columns span 100% of the viewport width. The column widths are defined by percentages instead of a set number of pixels. The margins are fixed based on the viewport size.
We use a fixed grid for any viewport that reaches the large breakpoint (1440 pixels and above). This sets the content area to 1200px. The margins are set to expand to fill any extra vertical space.