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>
根据屏幕大小，并非所有内容都可能适合在单个故事页面上。
<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 网格区域属性将元素放置到特定插槽中。
<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 上编辑示例