AMP Story 版面配置
簡介
amp-story-grid-layer 提供一些預先定義的版面配置範本。
填滿
填滿版面配置範本會讓第一個子項佔用所有可用空間。
<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>
使用 fill 版面配置時，圖片和影片的解析度應為 720x1280 像素。
<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>
垂直
垂直範本會沿著 y 軸排列元素。每個元素會佔用所需的空間。
<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>
視螢幕尺寸而定，並非所有內容都能容納在單一 story 頁面中。
<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>
內容會定義每一列佔用的空間大小。
<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>
三分
三分範本會將螢幕劃分為三個大小相等的列。
<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>
您可以使用 upper-third、middle-third 和 lower-third grid-area 屬性將元素放置到特定插槽中。
<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>
雖然這些範本可讓您在畫面上視覺化排列內容，但螢幕閱讀器/輔助技術仍會依照內容在底層標記中出現的順序宣告內容。請確保文件標記中的內容順序符合邏輯，無論視覺呈現方式為何。
水平
水平範本會沿著 x 軸排列其元素。
<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>
預設情況下，其元素會對齊到行的開頭。
<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 上編輯範例