--- title: "Responsive grid system" tab_title: "Usage" description: "Use the responsive grid system to organize design elements for visual consistency across pages." page_size: "medium" thumbnail: "https://design.visa.com/assets/base-elements/responsive-grid-system/responsive-grid-system-graphic.svg" header_image: "https://design.visa.com/assets/base-elements/responsive-grid-system/platform-scale-overview.svg" tags: [] categories: [] full_width: false show_table_of_contents: true show_on_overview: true related: {"aboutVPDS":[],"baseElements":[],"components":[],"content":[],"patterns":[{"id":"application-layouts","collection":"patterns"}]} --- 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 blank webpage with sections identified by letters. A is small white columns on the edges of the screen. B is a series of pink columns at regular intervals across the page. C is small white columns between the pink ones. D is transparent gray boxes that span specific numbers of pink columns. **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. A webpage with the content area, columns and gutters in a fixed width area in the center of the screen with wide margins on both sides. ### 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. A webpage where the content area, columns and gutters span almost the entire screen with only small margins on either side.
## Breakpoints Breakpoints are specific points where the layout changes to match different screen sizes. The grid system was designed around the different [Application layouts](https://design.visa.com/patterns/application-layouts) that VPDS offers. Each grid adapts to both the screen width as well as the navigational structure for each layout. Visualization showing >375 there are 4 columns and 16 gutters. 375 to 768 is 8 columns and 16 gutters. 768 to 1024 is 12 columns and 24 gutters. 1024+ is 12 columns and 24 gutters. ### 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. Two blank screens, one has just a blue header and the other has an additional dark blue bar beneath the blue header. Breakpoints for horizontal navs, which lists the number of columns, margins, and gutters - Breakpoint: 4 - Number of columns: 16px - Margins: 16px - Breakpoint: 8 - Number of columns: 16px - Margins: 24px - Breakpoint: 12 - Number of columns: 24px - Margins: 24px - Breakpoint: 12 - Number of columns: 80px min - Margins: 24px ### 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. Two blank screens, one only has a dark blue bar on the left, the other has both the dark blue left bar and a blue header. Breakpoints for vertical and mixed layouts, which lists the number of columns, margins, and gutters - Breakpoint: 12 - # columns: 24px - Margins: 24px - Breakpoint: 12 - # columns: 24px - Margins: 24px - Breakpoint: 12 - # columns: 32px - Margins: 24px - Breakpoint: 12 - # columns: 32px - Margins: 24px - Breakpoint: 12 - # columns: 32px - Margins: 24px - Breakpoint: 12 - # columns: 32px - Margins: 24px - Breakpoint: 12 - # columns: 32px - Margins: 24px - Breakpoint: 12 - # columns: 32px - Margins: 24px ## 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. Two text input fields side by side with highlights showing they are 16px apart from each other and 24px above a Submit button ## 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 A form in web view, with a full header that has a logo, application name, tabs, and menu drop downs. ### Mobile A form in mobile view, the UI and text are larger and constrained to the narrower width and there is a smaller header with only a logo, menu and profile buttons. ## 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. {/* no alt because the image doesn't give info not in paragraph */} ### 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. {/* no alt because the image doesn't give info not in paragraph */} ## 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.](https://design.visa.com/base-elements/typography/usage) Two side by side columns showing the difference in text between web and mobile. Mobile is larger and the text wraps to the next line earlier than web. ## 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.
Unit usage and operating system - Unit: Android - Unit: Image resolution - Unit: iOS - Unit: Web - Unit: Type scaling