Responsive grid system

A responsive grid system is a framework enabling apps and website to adapt their layouts to fit different screen sizes or orientations. This helps ensure visual consistency throughout a product experience while still allowing for flexibility in design.

VPDS grids guide element placement on a page, working with VPDS components, spacing, and typography. They adjust sizing based on the platform to ensure designs are consistent, usable, and appealing on any screen or device.

Anatomy

A. Margin: The empty space on the two outer edges of the grid.
B. Column: Vertical guides spanning the width of the screen.
C. Gutter: Empty space between columns with fixed widths based on the defined breakpoints.
D. Content area: Area containing page content or components that can span any number of columns.

Fixed vs. fluid grids

Fixed grids

Fixed grids have a set maximum width with fixed columns and gutters. As the screen size changes, the content areas maintain a fixed width and the margins grow or shrink. They’re ideal for text-heavy designs, enhancing readability.

Fluid grids

Fluid grids scale with screen width, using all the available space. Columns expand as the screen grows, while gutters and margins remain fixed. They’re ideal for dashboards or data-heavy designs.

Breakpoints

Breakpoints are specific points where the layout changes to match different screen sizes. The grid system was designed around the different Application layouts that VPDS offers. Each grid adapts to both the screen width as well as the navigational structure for each layout.

Horizontal and advanced layouts

The grid designed for horizontal and advanced layouts is simple and flexible. Its variants are fluid by design with one option for a fixed grid at larger screen sizes.

Vertical and mixed layouts

The grid designed for vertical and mixed layouts adapts to accommodate the left navigation panel. The grid begins to the right of the left navigation, with the space between the navigation panel and the first column serving as the left margin. While the grid system is fixed in Figma, it can also be built as fluid.

System baseline

A baseline grid ensures consistency within content areas across platforms. It guides the design of foundational elements like typography and iconography, as well as main components.

Factors of four

The VPDS grid system is based on factors of four as the base unit. For example, for vertical spacing, it is suggested to use spacing blocks of 16px, 24px, 32px, 48px, etc.

Note: Aligning to half pixels and using odd numbers may disrupt clean pixel alignment.

Content reflow

As screen width changes, consider how your content areas will shift or reflow. It’s crucial to communicate this reflow to the development team, ensuring they understand how the design should adapt at each breakpoint. Reflow can be defined in terms of percentages or column spanning. For instance, if a content area occupies 50% (6 columns) at 1600px, it might occupy 25% (4 columns) at 1280px. Define your reflow patterns based on the components within your content areas.

Screen size

The VPDS grid system is designed to scale across multiple platforms, from mobile to ultra-wide screens. Each view is designed for seamless content scaling. Note the grid dimension changes from mobile to desktop: Margins increase from 16px to 24px, and the number of columns changes with screen width. Mobile components fit easily into the predefined mobile grid.

Example layouts

The following is an example of a form designed in both web and mobile.

Web

Mobile

Component size

Web scale

Web components have a base height of 38 dp. The default component size is determined across the system by the base height.

Mobile scale

The mobile scale is 1.25 times larger than web, with a base height of 46 dp. It’s applied for native mobile and responsive web views when a touch device is detected.

Typography size

Typography also scales up for mobile platforms. Body 2 is the base body copy size for the design system. Body 2 is defined as 14 px for web platforms and 16 px for mobile platforms. Get more detailed specifications in Typography.

Units

Not all screens and platforms have the same pixel density, which is the number of pixels in a given area. This results in elements appearing larger on screens with lower pixel density and smaller on screens with higher density.

To address this, iOS uses points (pts) to determine the pixel density of Apple devices. Android uses density-independent pixels (dps) to scale designs uniformly across all screens. A density-independent pixel uses a physical pixel on a screen with a density of 160 pixels per inch as the base.

Related guidelines

Application layouts

Learn how to choose a navigational frame based on page content and information architecture.