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>

Besoin de plus amples explications ?

Si les explications de cette page ne répondent pas à vos questions, n'hésitez pas à contacter d'autres utilisateurs d'AMP pour discuter de votre cas d'utilisation spécifique.

Se rendre sur Stack Overflow

Une fonctionnalité n'a pas encore été expliquée ?

Le projet AMP encourage fortement votre participation et vos contributions ! Nous espérons que vous deviendrez un membre régulier de notre communauté open source, mais nous serons également ravis de recevoir des contributions ponctuelles concernant les questions qui vous intéressent particulièrement.

Modifier l'exemple sur GitHub