#BlackLivesMatter
Do you build things with AMP? Fill out the new AMP Developer Survey!
AMP
  • stories

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>
هل تحتاج إلى مزيد من التوضيح؟

إذا لم تكن الإيضاحات الموجودة في هذه الصفحة تُجيب على جميع أسئلتك، فلا تتردد في التواصل مع مستخدمي AMP الآخرين لمناقشة حالة الاستخدام المحددة لديك بالضبط.

الذهاب إلى Stack Overflow
هل هي ميزة غير موضحة؟

يشجع مشروع AMP مشاركتك ومساهمتك بشدة! ونأمل أن تكون مشاركًا دائمًا في مجتمعنا مفتوح المصدر، ولكننا نشجع أيضًا المساهمات التي تحدث لمرة واحدة في الأمور التي تتحمس لها.

تعديل العينة على GitHub