Layout & grid

The WPP DS provides a layout and grid system with clear guidelines on building and structuring apps under the Open OS.

Overview

We're using a 24-column responsive grid architecture to provide as much flexibility as possible.

Grid specification

When working with the WPP DS grid, you'll position items based on the view area available for your app. The view area can take up the entire browser viewport or a section of it, depending on whether you're using side panels.

The main items you'll position within the view area are the content area and margins.

Item	Specification	Description
Content area	95% of the view area	Content area is a space available for content. It should take up 95% of the view area, with the maximum width of 1812 px, and your should center it in the view area.
Margins	0	We don't use margins by default. Instead, we suggest using a custom space value to replace margins—which is the space that remains available after you've defined a content area. This additional space should take 2.5% of the view area on either side.

Fullscreen layout

Side navigation layout

When you use a side navigation panel to the left of your layout, it squeezes the available view area. The content area should still take up 95% of the view area, with 2.5% reserved for the left and right margins. The grid adjusts to the content area by scaling columns and gutters.

Column specification

Item	Specification
Column	24 px
Gutter min-width	16 px
Gutter width	2% of the content area

Fullscreen layout

Side navigation layout

When you use a side navigation panel to the left of your layout, it squeezes the available view area. The content area should still take up 95% of the view area, with 2.5% reserved for the left and right margins. The grid adjusts to the content area by scaling columns and gutters.

Grid in Figma

We recommend styling your screens to be 1366 px wide, which is one of the most commonly used screen size. However, the WPP DS offers grid styles in Figma that fit screen sizes from 1200 px and larger.

Grid Size	Grid Name	Fullscreen Content Area	Sidebar Content Area
1920	XLarge	1812 px	95% of 1680 px
1440	Large	95% of 1440 px	95% of 1200 px
1366	Medium	95% of 1366 px	95% of 1126 px
1280	Small	95% of 1280 px	95% of 1040 px

To use the grid styles in Figma:

1. Create a frame using one of the recommended sizes.
2. Select your frame to see the Layout option on the right control panel (it's grayed out, so just hover over it).
3. When hovering over the Layout option, select the four-dot menu icon.
4. Select a grid style from the dropdown and apply it to your frame.

Grid in Storybook

View in Storybook

Angular

<wpp-grid container>
  <wpp-grid item all="8">Column 1</wpp-grid>
  <wpp-grid item all="8">Column 2</wpp-grid>
  <wpp-grid item all="8">Column 3</wpp-grid>
</wpp-grid>

<wpp-grid container direction="column">
  <wpp-grid item all="24">Row 1</wpp-grid>
  <wpp-grid item all="24">Row 2</wpp-grid>
  <wpp-grid item all="24">Row 3</wpp-grid>
</wpp-grid>

<wpp-grid container>
  <wpp-grid item all="4">Column 1</wpp-grid>
  <wpp-grid item all="6">Column 2</wpp-grid>
  <wpp-grid item all="14">Column 3</wpp-grid>
</wpp-grid>

<wpp-grid container>
  <wpp-grid item xxs="24" xs="24" sm="12" md="12" lg="12" xlg="12">Column 1</wpp-grid>
  <wpp-grid item xxs="24" xs="24" sm="12" md="8" lg="6" xlg="6">Column 2</wpp-grid>
  <wpp-grid item xxs="24" xs="24" sm="24" md="4" lg="6" xlg="6">Column 3</wpp-grid>
</wpp-grid>

<wpp-grid container spacing="1">
  <wpp-grid item all="8">Column 1</wpp-grid>
  <wpp-grid item all="8">Column 2</wpp-grid>
  <wpp-grid item all="8">Column 3</wpp-grid>
  <wpp-grid item all="8">Column 4</wpp-grid>
  <wpp-grid item all="8">Column 5</wpp-grid>
  <wpp-grid item all="8">Column 6</wpp-grid>
  <wpp-grid item all="8">Column 7</wpp-grid>
  <wpp-grid item all="8">Column 8</wpp-grid>
  <wpp-grid item all="8">Column 9</wpp-grid>
</wpp-grid>

<wpp-grid container justifyContent="center">
  <wpp-grid item all="4">Column 1</wpp-grid>
  <wpp-grid item all="4">Column 2</wpp-grid>
  <wpp-grid item all="4">Column 3</wpp-grid>
</wpp-grid>

<wpp-grid container direction="column" alignItems="center">
  <wpp-grid item>Row 1</wpp-grid>
  <wpp-grid item>Row 2</wpp-grid>
  <wpp-grid item>Row 3</wpp-grid>
</wpp-grid>

React

import { WppGrid } from '@platform-ui-kit/components-library-react';

export const GridExample = () => (
  <WppGrid container rowSpacing={4}>
    <WppGrid item all={16}>
      <WppGrid container makeFullWidth>
        <WppGrid item all={8}>
          <div>
            <h3>Scale</h3>
            <p>50,000</p>
            <h3>Products on the platform</h3>
          </div>
        </WppGrid>
      </WppGrid>
    </WppGrid>
    ​<WppGrid item all={8}>
      <h3>Resources</h3>
      <p>Product summary</p>
    </WppGrid>​<WppGrid item all={14}>
      <div>
        <h3>Benefits</h3>
        <p>
          Manage interactive experiences with ease: combining human experience
          and technology effectively can help consumers learn and engage with
          content in new ways. However, these unique experiences can be hard to
          monitor, expensive to update, and difficult to track. By centralising
          experience management, Interactive Experience Management can make the
          process
        </p>
      </div>
    </WppGrid>
  </WppGrid>
);