Grid

It’s fundamental to everything we design. The 2x Grid is the geometric foundation of all the visual elements of Priority Dispatch, from typography to columns, boxes, icons, and illustrations. It provides structure and guidance for all creative decision-making.

Baseline grid and vertical rhythm

The type stack specifies 16px for the base font size, which produces an 8px x-height. The x-height is halved to produce a 4px baseline. All text flows vertically along this baseline, creating a similar rhythm across all screens. This rhythm is created by the line height between each line of text and the margin between elements.

It's fundamental to everything we design. The Grid is the geometric foundation of all visual elements of Priority Dispatch, from typography to columns, boxes, icons, and illustrations. It provides structure

The basic unit of Grid geometry is the 8-pixel square mini unit. Multiples of mini units compose the dimensions of columns, rows, boxes, along with their margins and padding. The mini unit adapts to your content while maintaining a consistent visual rhythm.

At breakpoint boundaries, mini units divide the screen into a fixed master grid, and multiples of mini units map to fluid grid column widths and row heights. Fixed boxes are sized in mini units, as are the fixed dimension of hybrid boxes

Margin and padding are always applied in fixed mini unit multiples. Boxes are sized by applying a sizing scale based on either fixed mini units or fluid column widths, along with a core set of aspect ratios.

The core concept of the Grid is to divide or multiply the space uniformly, forming a visual rhythm. Fluid grids are built by division, whereas fixed grids are built with multiplication. On breakpoint boundaries, these sizes match. Margins and padding are applied consistently in both cases.

Columns and Rows

Margins

Padding

Gutters

Breakpoints

Columns and rows create key lines that are essential for visual rhythm, especially for typography. Construct columns by either dividing a space into a fluid grid, or by tiling fixed boxes in multiples.

Fluid Grid

A fluid grid divides space evenly across columns. Within a breakpoint, the column count is constant, and unit size scales with screen size.

Fixed grid

A fixed grid starts with a fixed unit size from the sizing scale, then tiles and wraps as needed, like text.

When tiling fixed boxes, the column count is not known in advance, but a grid emerges visually due to the use of a consistent sizing scale. On breakpoint boundaries, fixed sizing scales match column sizes.

Hybrid grid

Hybrid grids are also frequent in practice, and hybrid boxes have properties of both.

The margins at the outer edge of the grid are always a fixed size within a breakpoint, even when columns are fluid. See breakpoints for a table of margin sizes.

Padding is always a fixed multiple of mini units: 16 pixels at all standard breakpoints. Always align type to the edge of box padding. Note, some design tools add padding to text boxes by default; check text box padding and remove it if necessary.

Use this set of standard breakpoints to maintain layout integrity across screen sizes. For best results, test designs and code at each of these standard breakpoints. Refer to line-length for questions on minimum sizes.

Create custom breakpoints to accommodate special needs, by writing your own media queries and CSS rules.

For best results, test designs and code at each of these standard breakpoints.

In user interfaces, screen size is dictated by the device and the user’s chosen window size. We may know content in advance, or the content may be dynamic.

Carefully consider the user’s goal for their screen space, particularly when displaying dynamic content. If a user’s goal is to see more items, scale column count by tiling fixed boxes. If a user wants to see more content within each item, scale boxes and use fixed column counts.

Fluid column structures are ideal for editorial content, dashboards, images, video, data visualizations, etc. In each case, scaling the size of things is more useful to the user than scaling the number of visible things. In a fluid grid, we divide available width in half to create columns, repeating as necessary.

At each breakpoint, column count is fixed and column width is a multiple of mini units. Row height is a multiple of column size, following recommended aspect ratios. Margin and padding are fixed multiples of mini units. In between breakpoints, actual column width is a percentage of the grid area, not a mini unit multiple. Content scales fluidly.

Fixed Boxes

Hybrid boxes

Key lines

A grid can be formed with fixed boxes by arranging tiles in an inline block. Column count grows with browser width. Tiles wrap to the next line, or are sometimes truncated with an overflow scroll.

First choose a base size from the sizing scale, then build up each box in multiples of the base size, following recommended aspect ratios. A grid emerges when each tile uses a multiple of a consistent base size. Following this method ensures consistency of tile sizes, even across products.

Hybrid boxes have different scaling rules in each dimension, so they do not use aspect ratios. When a user would resize the browser expecting content to scale in one dimension but not the other, use hybrid boxes.

Use the sizing scale to size a fixed dimension. Use column-width multiples to size a grid-fluid dimension. Aspect ratios do not apply.

Here are some common UI behaviors:

Regardless of how your grid is built, ensure the overall layout has visible key lines: vertical and horizontal lines on which multiple objects align.

Horizontal and vertical alignment are equally critical. When present, the eye can follow content more easily, increasing the perception of visual harmony.

We provide a sizing scale for both fixed and fluid sizes. Use it to size content as well as negative space. Like a type scale, the sizing scale constrains the range of sizes to improve consistency and rhythm, while still allowing a wide range of sizes. Spacing tokens are used to apply these relationships consistently across UIs.

Fixed Base Unit

Fluid Base Unit

Scaling multiple

Aspect ratio

Vertical rhythm

Components

Use this fixed sizing scale, comprised of select mini unit multiples, when sizing icons, tiling boxes, and applying vertical margin space.

Choose a size to use as your fixed base unit. Also see the breakpoints table.

For fluid grids, the column width is the base unit. Just as a box can span multiple columns, its height is a multiple of column width. Use cases are leading section in a webpage, divided section for editorial content, modals, etc. Check out the breakpoints table for pixel sizings.

After determining your base size, multiply it as needed for each use. For box sizing, apply an aspect ratio too.

When sizing boxes, constrain dimensions to one of the aspect ratios shown below whenever possible. Doing so will heighten the perception of unity between products.

Choose an aspect ratio from the table, then multiply the base unit in each dimension as needed to set width and height, maintaining the ratio in either portrait or landscape.

For example, to size a fluid box with a 2:1 landscape aspect ratio, you could span 4 columns in width and 2 column-widths of height. To size a fixed box with the same aspect ratio, you could start with an 80 pixel base unit, then multiply it by 4 in width and 2 in height, for a fixed box size of 320 by 160.

Use the fixed sizing scale to set vertical spacing between sections, by adding it to the top or bottom margin of a box:

Components can be sized like other boxes: either fixed or fluid, and often hybrid, with fixed height and fluid width. When interior space within a component is cramped, use the minor sizing scale:

When multiple components adhere to the same scale, grid relationships naturally emerge. For example, vertically aligning form fields such as checkboxes and radio buttons produces a grid effect when interior spacing is consistent.