AMP CSS Grid Library

Documentation and examples for css grid: AMP CSS Grid Library.

AMP CSS Grid

Responsive CSS 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.

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
1 of 1
1 of 1
1 of 1
1 of 1
1 of 1
1 of 1
1 of 1
1 of 1
1 of 1
1 of 1
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>
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.

Equal-width
1 of 2
1 of 2
1 of 3
1 of 3
1 of 3
1 of 5
1 of 5
1 of 5
1 of 5
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>
One column width
1 of 3
1 of 3
1 of 3
1 of 3
1 of 3
1 of 3
1 of 4
1 of 4
1 of 4
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>
Responsive

This 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 4
1 of 4
1 of 4
1 of 2
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>
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 2
1 of 3
1 of 3
1 of 3
1 of 4
1 of 4
1 of 4
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>
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 2
1 of 2
1 of 2
1 of 3
1 of 3
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>

Bootstrap grid documentation

Read more
We use cookies to optimize site functionality and give you the best possible experience.