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