AMP Story Layouts

Introduction

The amp-story-grid-layer provides a few pre-defined layout templates.

Fill

The fill layout template makes the first child take up all the available space.

<amp-story-page id="fill-template-example-1">
  <amp-story-grid-layer template="fill">
    <div class="content">Content</div>
  </amp-story-grid-layer>
</amp-story-page>

Images & videos should have a resolution of 720x1280 pixels when using the fill layout.

<amp-story-page id="fill-template-example-2">
  <amp-story-grid-layer template="fill">
    <amp-img src="https://unsplash.it/720/1280/" width="720" height="1280" layout="responsive" alt="..."></amp-img>
  </amp-story-grid-layer>
</amp-story-page>

Vertical

The vertical template lays its elements out along the y-axis. Each element takes as much space as it needs.

<amp-story-page id="vertical-template-example-1">
  <amp-story-grid-layer template="vertical">
    <div class="content">A paragraph</div>
    <div class="content">A longer paragraph</div>
    <div class="content">A much longer paragraph</div>
    <div class="content">A veeeeeeeeeeeeeeeeeeeeeeeeeeeeeery long Paragraph. By far. So very very long. It's
    actually so long that it spans over multiple lines.</div>
  </amp-story-grid-layer>
</amp-story-page>

Depending on the screen-size not everything might fit on a single story page.

<amp-story-page id="vertical-template-example-2">
  <amp-story-grid-layer template="vertical">
    <div class="content">Paragraph 1</div>
    <div class="content">Paragraph 2</div>
    <div class="content">Paragraph 3</div>
    <div class="content">Paragraph 4</div>
    <div class="content">Paragraph 5</div>
    <div class="content">Paragraph 6</div>
    <div class="content">Paragraph 7</div>
    <div class="content">Paragraph 8</div>
    <div class="content">Paragraph 9</div>
    <div class="content">Paragraph 10</div>
    <div class="content">Paragraph 11</div>
    <div class="content">Paragraph 12</div>
    <div class="content">Paragraph 13</div>
    <div class="content">Paragraph 14</div>
    <div class="content">Paragraph 15</div>
  </amp-story-grid-layer>
</amp-story-page>

The content defines how much space each row takes.

<amp-story-page id="vertical-template-example-3">
  <amp-story-grid-layer template="vertical">
    <amp-img src="https://unsplash.it/720/640/?image=10"
             width="720"
             height="640" layout="responsive"
             alt="..."></amp-img>
    <amp-img src="https://unsplash.it/720/640/?image=11"
             width="720"
             height="640" layout="responsive"
             alt="..."></amp-img>
  </amp-story-grid-layer>
</amp-story-page>

Thirds

The thirds template divides the screen into three equally-sized rows.

<amp-story-page id="thirds-template-example-1">
  <amp-story-grid-layer template="thirds">
    <div class="content" grid-area="upper-third">Paragraph 1</div>
    <div class="content" grid-area="middle-third">Paragraph 2</div>
    <div class="content" grid-area="lower-third">Paragraph 3</div>
  </amp-story-grid-layer>
</amp-story-page>

You can place elements into specifics slots using the upper-third, middle-third and lower-third grid-area attributes.

<amp-story-page id="thirds-template-example-2">
  <amp-story-grid-layer template="thirds">
    <div class="content" grid-area="middle-third">Middle</div>
  </amp-story-grid-layer>
</amp-story-page>

While these templates allow you to visually arrange content on the screen, the content will still be announced by screen readers / assistive technologies in the order in which it appears in the underlying markup. Make sure that the content order in your document's markup is logical, regardless of how it will be presented visually.

Horizontal

The horizontal template lays its elements out along the x-axis.

<amp-story-page id="horizontal-template-example-1">
  <amp-story-grid-layer template="horizontal">
    <div class="content">Paragraph 1</div>
    <div class="content">Paragraph 2</div>
  </amp-story-grid-layer>
</amp-story-page>

By default, its elements are aligned to the start of the line.

<amp-story-page id="horizontal-template-example-2">
  <amp-story-grid-layer template="horizontal">
    <div class="content">Paragraph 1</div>
    <div class="content">Paragraph 2</div>
    <div class="content">Paragraph 3</div>
    <div class="content">Paragraph 4</div>
    <div class="content">Paragraph 5</div>
    <div class="content">Paragraph 6</div>
  </amp-story-grid-layer>
</amp-story-page>

Need further explanation?

If the explanations on this page don't cover all of your questions feel free to reach out to other AMP users to discuss your exact use case.

Go to Stack Overflow

An unexplained feature?

The AMP project strongly encourages your participation and contributions! We hope you'll become an ongoing participant in our open source community but we also welcome one-off contributions for the issues you're particularly passionate about.

Edit sample on GitHub