American Express American Express |

Grid

Layout

We use a 12-column grid to optimize flexibility and to allow for a variety of layouts. The grid layout consists of containers, rows, and columns.

For Sketch and PSD grid templates, please download the UI Kit in the Resources section.

Usage

The container sets the maximum width of the content of the app based on breakpoint. There should only be one container used for the overall app that wraps all the components.

The rows and columns are used for responsive layout, and the positioning of the components as well as elements within the components. Rows and columns should not be used for individual elements that have non-responsive spacing needs.

Rows should always have at least one column, even if it’s just a single col-12-*. Likewise, columns should always be within a row and not standalone or nested within other columns.

The rows have negative margins on their left and right sides because there should always be columns within the rows to offset the margins. The columns have left and right padding, so the negative margins on the rows cancel out the first and last column spacing on either end to align with the parent element.

Do this.
  • Use grids for responsive layout.
  • Use columns to wrap responsive elements.
  • Use rows to wrap columns.
  • Use containers to wrap the header, body, and footer content.
Don’t do this.
  • Don’t use grids for unresponsive, full width blocks.
  • Don’t use columns to wrap fixed width elements.
  • Don’t use columns without rows.
  • Don’t use columns for padding – use utility classes instead.

Containers

Usage

A container is the part of the layout that sets the maximum width of the main content of an app. It wraps components and elements to keep the site content within 1240px.

Breakpoint Ranges and Gutters

Usage

To maximize space (especially for mobile and tablets), it’s important to identify the gutter per breakpoint. This will also help you maintain consistent spacing and provide customers with an optimal user experience.

X-Small

Breakpoint Range = 320px - 374px
Gutters = 10px

Small

Breakpoint Range = 375px - 767px
Gutters = 12px
Maximum Container Width = 576px

Medium

Breakpoint Range = 768px - 1023px
Gutters = 18px
Maximum Container Width = 720px

Large

Breakpoint Range = 1024px - 1279px
Gutters = 20px
Maximum Container Width = 940px

X-Large

Breakpoint Range = 1280px to Infinity
Gutters = 20px
Maximum Container Width = 1240px

Example

1

2

3

4

5

6

7

8

9

10

11

12

Copy
<div class="row">
    <div class="col-xs-1"><p class="text-align-center pad-tb dls-gray-02-bg">1</p></div>
    <div class="col-xs-1"><p class="text-align-center pad-tb dls-gray-02-bg">2</p></div>
    <div class="col-xs-1"><p class="text-align-center pad-tb dls-gray-02-bg">3</p></div>
    <div class="col-xs-1"><p class="text-align-center pad-tb dls-gray-02-bg">4</p></div>
    <div class="col-xs-1"><p class="text-align-center pad-tb dls-gray-02-bg">5</p></div>
    <div class="col-xs-1"><p class="text-align-center pad-tb dls-gray-02-bg">6</p></div>
    <div class="col-xs-1"><p class="text-align-center pad-tb dls-gray-02-bg">7</p></div>
    <div class="col-xs-1"><p class="text-align-center pad-tb dls-gray-02-bg">8</p></div>
    <div class="col-xs-1"><p class="text-align-center pad-tb dls-gray-02-bg">9</p></div>
    <div class="col-xs-1"><p class="text-align-center pad-tb dls-gray-02-bg">10</p></div>
    <div class="col-xs-1"><p class="text-align-center pad-tb dls-gray-02-bg">11</p></div>
    <div class="col-xs-1"><p class="text-align-center pad-tb dls-gray-02-bg">12</p></div>
</div>

Responsiveness

The gutters (vertical and horizontal space between each container) align with our gutter dimensions. To view how the gutters change per breakpoint range, click on the View Example button below.

Responsive Container Specs

View Example

Equal Width

Percentages

Each column of our 12-column grid is an equal percentage of the full width.

It’s important to note that while each column width is the same, the width is dependent on the breakpoint range and its assigned gutter.

Example

Copy
<div class="row">
    <div class="col-md-1 margin-b"><p class="text-align-center pad-tb dls-gray-02-bg">.col-md-1</p></div>
    <div class="col-md-1 margin-b"><p class="text-align-center pad-tb dls-gray-02-bg">.col-md-1</p></div>
    <div class="col-md-1 margin-b"><p class="text-align-center pad-tb dls-gray-02-bg">.col-md-1</p></div>
    <div class="col-md-1 margin-b"><p class="text-align-center pad-tb dls-gray-02-bg">.col-md-1</p></div>
    <div class="col-md-1 margin-b"><p class="text-align-center pad-tb dls-gray-02-bg">.col-md-1</p></div>
    <div class="col-md-1 margin-b"><p class="text-align-center pad-tb dls-gray-02-bg">.col-md-1</p></div>
    <div class="col-md-1 margin-b"><p class="text-align-center pad-tb dls-gray-02-bg">.col-md-1</p></div>
    <div class="col-md-1 margin-b"><p class="text-align-center pad-tb dls-gray-02-bg">.col-md-1</p></div>
    <div class="col-md-1 margin-b"><p class="text-align-center pad-tb dls-gray-02-bg">.col-md-1</p></div>
    <div class="col-md-1 margin-b"><p class="text-align-center pad-tb dls-gray-02-bg">.col-md-1</p></div>
    <div class="col-md-1 margin-b"><p class="text-align-center pad-tb dls-gray-02-bg">.col-md-1</p></div>
    <div class="col-md-1 margin-b"><p class="text-align-center pad-tb dls-gray-02-bg">.col-md-1</p></div>

    <div class="col-md-2 margin-b"><p class="text-align-center pad-tb dls-gray-02-bg">.col-md-2</p></div>
    <div class="col-md-2 margin-b"><p class="text-align-center pad-tb dls-gray-02-bg">.col-md-2</p></div>
    <div class="col-md-2 margin-b"><p class="text-align-center pad-tb dls-gray-02-bg">.col-md-2</p></div>
    <div class="col-md-2 margin-b"><p class="text-align-center pad-tb dls-gray-02-bg">.col-md-2</p></div>
    <div class="col-md-2 margin-b"><p class="text-align-center pad-tb dls-gray-02-bg">.col-md-2</p></div>
    <div class="col-md-2 margin-b"><p class="text-align-center pad-tb dls-gray-02-bg">.col-md-2</p></div>

    <div class="col-md-3 margin-b"><p class="text-align-center pad-tb dls-gray-02-bg">.col-md-3</p></div>
    <div class="col-md-3 margin-b"><p class="text-align-center pad-tb dls-gray-02-bg">.col-md-3</p></div>
    <div class="col-md-3 margin-b"><p class="text-align-center pad-tb dls-gray-02-bg">.col-md-3</p></div>
    <div class="col-md-3 margin-b"><p class="text-align-center pad-tb dls-gray-02-bg">.col-md-3</p></div>

    <div class="col-md-4 margin-b"><p class="text-align-center pad-tb dls-gray-02-bg">.col-md-4</p></div>
    <div class="col-md-4 margin-b"><p class="text-align-center pad-tb dls-gray-02-bg">.col-md-4</p></div>
    <div class="col-md-4 margin-b"><p class="text-align-center pad-tb dls-gray-02-bg">.col-md-4</p></div>

    <div class="col-md-6 margin-b"><p class="text-align-center pad-tb dls-gray-02-bg">.col-md-6</p></div>
    <div class="col-md-6"><p class="text-align-center pad-tb dls-gray-02-bg">.col-md-6</p></div>
</div>

Push and Pull

Responsive

Push and pull allows us to change the order of the sections without affecting visual layout.

For example, we can push a section to the right and pull a section to the left so that when it stacks in mobile layouts, the right section still comes before the left.

Example

Copy
<div class="row">
    <div class="col-md-12 margin-b"><p class="text-align-center pad-tb dls-gray-02-bg">.col-md-push-12</p></div>
    <div class="col-md-push-1 col-md-11 margin-b"><p class="text-align-center pad-tb dls-gray-02-bg">.col-md-push-1</p></div>
    <div class="col-md-pull-11 col-md-1 margin-b"><p class="text-align-center pad-tb dls-gray-02-bg">.col-md-pull-11</p></div>
    <div class="col-md-push-2 col-md-10 margin-b"><p class="text-align-center pad-tb dls-gray-02-bg">.col-md-push-2</p></div>
    <div class="col-md-pull-10 col-md-2 margin-b"><p class="text-align-center pad-tb dls-gray-02-bg">.col-md-pull-10</p></div>
    <div class="col-md-push-3 col-md-9 margin-b"><p class="text-align-center pad-tb dls-gray-02-bg">.col-md-push-3</p></div>
    <div class="col-md-pull-9 col-md-3 margin-b"><p class="text-align-center pad-tb dls-gray-02-bg">.col-md-pull-9</p></div>
    <div class="col-md-push-4 col-md-8 margin-b"><p class="text-align-center pad-tb dls-gray-02-bg">.col-md-push-4</p></div>
    <div class="col-md-pull-8 col-md-4 margin-b"><p class="text-align-center pad-tb dls-gray-02-bg">.col-md-pull-8</p></div>
    <div class="col-md-push-6 col-md-6 margin-b"><p class="text-align-center pad-tb dls-gray-02-bg">.col-md-push-6</p></div>
    <div class="col-md-pull-6 col-md-6"><p class="text-align-center pad-tb dls-gray-02-bg">.col-md-pull-6</p></div>
</div>

Offset

Move columns to the right using .col-md-offset-* classes. These classes increase the left margin of a column by * columns. For example, .col-md-offset-4 moves .col-md-4 over four columns.

Example

Copy
<div class="row">
    <div class="col-md-4 margin-b"><p class="text-align-center pad-tb dls-gray-02-bg">.col-md-4</p></div>
    <div class="col-md-4 col-md-offset-4 margin-b"><p class="text-align-center pad-tb dls-gray-02-bg">.col-md-4, .col-md-offset-4</p></div>
</div>
<div class="row">
    <div class="col-md-3 col-md-offset-3 margin-b"><p class="text-align-center pad-tb dls-gray-02-bg">.col-md-3, .col-md-offset-3</p></div>
    <div class="col-md-3 col-md-offset-3 margin-b"><p class="text-align-center pad-tb dls-gray-02-bg">.col-md-3, .col-md-offset-3</p></div>
</div>
<div class="row">
    <div class="col-md-6 col-md-offset-3"><p class="text-align-center pad-tb dls-gray-02-bg">.col-md-6, .col-md-offset-3</p></div>
</div>