Google AMP Grid

Each column is contained within rows, which are contained within a container. This grid is built mobile-first, so all columns will expand to the full container width on smaller screens.

Google AMP Grid · Basics

The grid cells below do not specify any widths, they just naturally space themselves equally and expand to fit the entire row. They’re also equal height by default.

1 of 1

<div class="container">
  <div class="row">
    <div class="col-1">...</div>
  </div>
  <div class="row">
    <div class="col-2">...</div>
  </div>
  <div class="row">
    <div class="col-3">...</div>
  </div>
  <div class="row">
    <div class="col-4">...</div>
  </div>
  <div class="row">
    <div class="col-5">...</div>
  </div>
  <div class="row">
    <div class="col-6">...</div>
  </div>
  <div class="row">
    <div class="col-7">...</div>
  </div>
  <div class="row">
    <div class="col-8">...</div>
  </div>
  <div class="row">
    <div class="col-9">...</div>
  </div>
  <div class="row">
    <div class="col-10">...</div>
  </div>
  <div class="row">
    <div class="col-11">...</div>
  </div>
  <div class="row">
    <div class="col-12">...</div>
  </div>
</div>

Google AMP Grid · Auto-layout

Use breakpoint-specific column classes for equal-width columns. Add any number of a column classes for each breakpoint you need and every column will be the same width.

Google AMP Grid · Equal-width

1 of 2

1 of 3

1 of 5

<div class="container">
  <div class="row">
    <div class="col">...</div>
    <div class="col">...</div>
  </div>
  <div class="row">
    <div class="col">...</div>
    <div class="col">...</div>
    <div class="col">...</div>
  </div>
  <div class="row">
    <div class="col">...</div>
    <div class="col">...</div>
    <div class="col">...</div>
    <div class="col">...</div>
    <div class="col">...</div>
  </div>
</div>

Google AMP Grid · Setting one column width

1 of 3

1 of 4

<div class="container">
  <div class="row">
    <div class="col">...</div>
    <div class="col-5">...</div>
    <div class="col">...</div>
  </div>
  <div class="row">
    <div class="col">...</div>
    <div class="col-7">...</div>
    <div class="col">...</div>
  </div>
  <div class="row">
    <div class="col">...</div>
    <div class="col-3">...</div>
    <div class="col">...</div>
    <div class="col-2">...</div>
  </div>
</div>

Google AMP Grid · Responsive

This Google AMP grid framework includes five tiers of predefined classes for building complex responsive layouts. Customize the size of your columns on extra small, small, medium, large, or extra large devices however you see fit.

Breakpoints

For grids that are the same from the smallest of devices to the largest, use the .col and .col-* classes. Specify a numbered class when you need a particularly sized column.

1 of 4

1 of 2

<div class="container">
  <div class="row">
    <div class="col">...</div>
    <div class="col">...</div>
    <div class="col">...</div>
    <div class="col">...</div>
  </div>
  <div class="row">
    <div class="col-8">...</div>
    <div class="col-4">...</div>
  </div>
</div>

Google AMP Grid · Stacked to horizontal

Using a single set of .col-sm-* classes, can you create a basic grid system that starts out stacked and becomes horizontal at the small breakpoint *sm.

1 of 2

1 of 3

1 of 4

<div class="container">
  <div class="row">
    <div class="col-sm-8">...</div>
    <div class="col-sm-4">...</div>
  </div>
  <div class="row">
    <div class="col-sm">...</div>
    <div class="col-sm">...</div>
    <div class="col-sm">...</div>
  </div>
  <div class="row">
    <div class="col-sm">...</div>
    <div class="col-sm">...</div>
    <div class="col-sm">...</div>
    <div class="col-sm">...</div>
  </div>
</div>

Google AMP Grid · Mix and match

Don’t want your columns to simply stack in some grid tiers, use a combination of different classes for each tier as needed.

1 of 2

1 of 3

<div class="container">
  <div class="row">
    <div class="col-4">...</div>
    <div class="col-8">...</div>
  </div>
  <div class="row">
    <div class="col col-md-3">...</div>
    <div class="col-6 col-md-9">...</div>
  </div>
  <div class="row">
    <div class="col-6 col-md-4">...</div>
    <div class="col-6 col-md-4">...</div>
    <div class="col-6 col-md-4">...</div>
  </div>
</div>

Google AMP Grid Layout

Google AMP Grid

Google AMP Grid · Basics

Google AMP Grid · Auto-layout

Google AMP Grid · Equal-width

Google AMP Grid · Setting one column width

Google AMP Grid · Responsive

Google AMP Grid · Stacked to horizontal

Google AMP Grid · Mix and match

Bootstrap grid documentation

Read more