Skip to main content

Grid & Spacing

Responsive grid and spacing guidelines create layout flexibility and consistency.

Utilizing a responsive layout grid as a basis for design and development provides guidance for placement of components and consistency across devices enhancing user experience across multiple devices.

Terminology

Columns

Content on the page is placed within a 12-column responsive grid. Column width is defined by percentages, so it can change with the size of the grid.

Gutters

Gutters are the spaces between columns. They visually break up content and provide consistent spacing. Gutter widths are fixed values based on breakpoints.

Defining the Grid

Grids within an application can vary depending on the content of the feature. They always have a minimum number of columns defined for each breakpoint.

Breakpoints

Breakpoints are used to define layouts cohesively across multiple device sizes. They are based on minimum viewport widths and scale as the width changes to adjust to screen size.

Breakpoint Value (px/ rem) Columns Size (%) Min Margin
X-Small 320/ 20 4 25 4
Small 576/ 36 4 25 4
Medium 768/ 48 8 12.5 8
Large 992/ 62 12 8.3 8
X-Large 1200/ 75 12 8.3 8
XX-Large 1600/ 100 12 8.3 8

Nested Grids

Smaller grids can be nested within the main grid, when content within a region needs to be structured.

Grid with Panels or Rails

Panels and rails can offset the grid. The width of the component is used as the offset. On smaller screens panels and rails may float on top of the responsive grid. Panels and rails do not adhere to or use the responsive grid for element alignment inside them. They will be defined separately in the modules and layout sections.

Sizing Regions

Regions can house modules (or combinations of basic components) such as content, sidebars, headers, navigation, and footers. These elements should be consistent across products and will be defined in Modus in the modules and layout sections.

Spacing

Spacing is a vital part of visual hierarchy within regions. Spacing is used to align elements within smaller containers in the UI. Trimble uses a baseline spacing of 8px and its multiples (some elements can also utilize an x-small spacing of 4px).

Spacing Scale Value (px) Value (rem)
X-Small 4 0.25
Small 8 0.5
Medium 16 1
Large 24 1.5
X-Large 32 2
XX-Large 48 3
Last updated September 17, 2024.