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"></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"></amp-img>
<amp-img src="https://unsplash.it/720/640/?image=11"
width="720"
height="640" layout="responsive"></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>
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>
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