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>

さらに説明が必要ですか？

このページの説明でご質問のすべてを解消できない場合は、あなたの実際の使用事例について他の AMP ユーザーに問い合わせて話し合ってください。

Stack Overflow にアクセスする

説明されていない機能ですか？

AMP プロジェクトでは皆さんの参加と貢献を強くお勧めしています！当社はオープンソースコミュニティに継続的にご参加いただくことを希望しますが、特に熱心に取り組んでいる問題があれば1回限りの貢献でも歓迎します。

GitHub でサンプルを編集する