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>

Ti servono altre spiegazioni?

Se le spiegazioni riportate in questa pagina non rispondono a tutte le tue domande, non esitare a contattare altri utenti AMP per discutere il tuo caso d'uso specifico.

Vai a Stack Overflow

Ci sono funzioni non descritte?

Il progetto AMP invita tutti a partecipare e dare il proprio contributo! Ci auguriamo che tu possa partecipare regolarmente alla nostra community open source, ma saremo anche lieti di ricevere eventuali contributi una-tantum sulle questioni che ti interessano.

Modifica esempio in GitHub