用法
有效的子元素
属性
样式
- 模板
  - fill
  - vertical
  - horizontal
  - thirds
- 预先模板化的 UI
  - 横向半屏 UI
  - 现代宽高比
    - 前景
    - 背景

重要提示：此文档不适用于您当前选择的格式广告！

amp-story-grid-layer

描述

AMP Story 单页的单个图层，将其内容定位在基于网格的布局中。

必需脚本

<script async custom-element="amp-story" src="https://cdn.ampproject.org/v0/amp-story-1.0.js"></script>

用法

<amp-story-grid-layer> 组件将其子元素布局成网格。其实现基于 CSS Grid Spec。

有效的子元素

amp-story-grid-layer 可以包含以下任何元素

注意：此列表会随着时间的推移而扩展。

区域	允许的标签
媒体	`<amp-audio>` `<amp-img>` `<amp-video>` `<source>` `<svg>` `<track>`
分析与测量	`<amp-experiment>` `<amp-pixel>`
分节	`<address>` `<article>` `<aside>` `<footer>` `<h1>-<h6>` `<header>` `<hgroup>` `<nav>` `<section>`
文本	`<abbr>` `<amp-fit-text>` `<amp-font>` `<amp-gist>` `<b>` `<bdi>` `<bdo>` `<blockquote>` `<br>` `<cite>` `<code>` `<data>` `<del>` `<dfn>` `<div>` `<em>` `<figcaption>` `<figure>` `<hr>` `<i>` `<ins>` `<kbd>` `<main>` `<mark>` `<p>` `<pre>` `<q>` `<rp>` `<rt>` `<rtc>` `<ruby>` `<s>` `<samp>` `<small>` `<span>` `<strong>` `<sub>` `<sup>` `<time>` `<u>` `<var>` `<wbr>`
列表	`<amp-list>` `<amp-live-list>` `<dd>` `<dl>` `<dt>` `<li>` `<ol>` `<ul>`
表格	`<caption>` `<col>` `<colgroup>` `<table>` `<tbody>` `<td>` `<tfoot>` `<th>` `<thead>` `<tr>`
链接	`<a>`
嵌入式组件	`<amp-twitter>`
其他	`<amp-install-serviceworker>` `<noscript>`

属性

template [必需]

template 属性确定网格图层的布局。下面“模板”部分描述了可用的模板。

grid-area [可选]

此属性在 <amp-story-grid-layer> 的子元素上指定。grid-area 指定使用 template 定义的命名区域，其中应显示包含此属性的元素。

示例

<amp-story-grid-layer template="thirds">
  <p grid-area="middle-third">Element 1</p>
  <p grid-area="lower-third">Element 2</p>
  <p grid-area="upper-third">Element 3</p>
</amp-story-grid-layer>

aspect-ratio [可选]

该值以“水平:垂直”格式指定宽高比，其中“水平”和“垂直”均为整数。如果指定此属性，则网格图层的布局将设置为符合指定的比例。在这种情况下，字体大小将自动设置为结果高度的 1/10，以实现成比例的内容缩放。

示例

<amp-story-grid-layer aspect-ratio="9:16" template="vertical">
  <div style="width: 10%; height: 10%; font-size: 2em;">
    This block will be in 9:16 aspect ratio and font size will be set at the 20%
    of the layer's height.
  </div>
</amp-story-grid-layer>

preset [可选]

指定一个响应式预设，该预设使用宽高比和缩放因子配置图层。

预设为

2021-background：一个宽高比图层，放大以覆盖 letterboxed 边距。可能只包含背景资源（图像或视频）。
2021-foreground：包含所有前景资源的宽高比图层。

值为

预设	宽高比	缩放因子
2021-background	69:116	1.142
2021-foreground	69:116	1

这些预设针对 2021 年的移动屏幕进行了优化。随着技术的发展，请关注新的预设，并关注 Web Stories 路线图。

anchor [可选]

将宽高比图层（包括预设）与指定的边框或角对齐。当位置元素相对于边框或角时，使用此属性来保持图层之间的缩放。选项：top、left、bottom、right、top-left、top-right、bottom-left、bottom-right。

样式

模板

以下是可用于指定网格图层布局的可用模板。

要查看正在使用的布局模板，请查看 AMP By Example 上的布局演示。

fill

fill 模板会全出血显示其第一个子元素。不显示所有其他子元素。

命名区域：（无）

示例

<amp-story-grid-layer template="fill">
  <amp-img src="cat.jpg" alt="..."></amp-img>
</amp-story-grid-layer>

vertical

vertical 模板沿 y 轴布局其元素。默认情况下，其元素与顶部对齐，并且可以沿 x 轴占据整个屏幕。

命名区域：（无）

<amp-story-grid-layer template="vertical">
  <p>Element 1</p>
  <p>Element 2</p>
  <p>Element 3</p>
</amp-story-grid-layer>

horizontal

horizontal 模板沿 x 轴布局其元素。默认情况下，其元素与行的开始对齐，并且可以沿 y 轴占据整个屏幕。

命名区域：（无）

<amp-story-grid-layer template="horizontal">
  <p>Element 1</p>
  <p>Element 2</p>
  <p>Element 3</p>
</amp-story-grid-layer>

thirds

thirds 模板将屏幕划分为三个大小相等的行，并允许您将内容插入每个区域。

命名区域

upper-third
middle-third
lower-third

<amp-story-grid-layer template="thirds">
  <p grid-area="middle-third">Element 1</p>
  <p grid-area="lower-third">Element 2</p>
  <p grid-area="upper-third">Element 3</p>
</amp-story-grid-layer>

尽管这些模板允许您在屏幕上可视化地排列内容，但屏幕阅读器/辅助技术仍将按照内容在基础标记中出现的顺序来宣布内容。请确保文档标记中的内容顺序是逻辑的，无论它在视觉上如何呈现。

预先模板化的 UI

横向半屏 UI

横向半屏预先模板化的 UI 将调整 <amp-story-grid-layer> 元素的大小，使其占据屏幕的一半而不是全屏，并定位在视口的左半部分或右半部分。此属性仅影响横向视口，在纵向视口上将被忽略。此模板使设计全出血横向故事变得更加容易：将屏幕分成两半会在大多数设备上为每一半提供纵向比例，从而允许重用已为纵向故事构建的纵向资源、设计和模板。

<amp-story-grid-layer> 元素上的 position 属性接受两个值：landscape-half-left 或 landscape-half-right。

您的故事需要启用 supports-landscape 模式才能使用此模板。

示例

<amp-story-page id="foo">
  <amp-story-grid-layer template="fill" position="landscape-half-left">
    <amp-img src="cat.jpg" alt="..."></amp-img>
  </amp-story-grid-layer>
  <amp-story-grid-layer template="vertical" position="landscape-half-right">
    <h2>Cat ipsum dolor sit amet...</h2>
  </amp-story-grid-layer>
</amp-story-page>

现代宽高比

网格图层上的响应式预设可最大化前景元素的可使用屏幕空间，并一致地缩放资源。

<amp-story-grid-layer preset="2021-background" template="fill">
    <amp-img src="cat.jpg" layout="fill" alt="...">
</amp-story-grid-layer>
<amp-story-grid-layer preset="2021-foreground">
    <h1>This will stay consistent with the bg</h1>
</amp-story-grid-layer>
<amp-story-grid-layer preset="2021-foreground" anchor="bottom-left">
    <!-- Position the icon close to the corner on all screens -->
    <amp-img src="icon.jpg" alt="..." style="bottom: 1em; left: 1em">
</amp-story-grid-layer>

背景预设主要用于设计具有背景和前景元素的布局。如果页面仅在背景中包含图像或视频，请考虑为此场景使用常规网格图层。

前景

对前景元素使用 2021-foreground 预设。此图层将始终完全可见，并水平或垂直扩展到边界，从而在不裁剪的情况下最大化大小。可以使用属性 anchor 将前景图层固定到页面角或边框，以便元素可以相对于这些边框或角进行定位（这对于徽标或脚注很有用）。

背景

对背景图层使用 2021-background 预设。此预设会在大多数手机上使用背景资源覆盖整个屏幕。它在不进行 letterboxing 的情况下执行此操作，并保持与前景元素的位置一致。虽然此技术提供了一致的用户体验，但可能会裁剪背景一个或所有边框的 7%。在设计和选择资源时请记住这一点。

此预设可能会在没有传统手机屏幕尺寸的设备（例如平板电脑或可折叠手机）上显示 letterboxing。您可以更改页面的背景颜色以匹配背景，以获得最佳视觉效果。

需要更多帮助？

您已经阅读此文档十几次了，但它并没有真正涵盖您的所有问题？也许其他人也有同感：在 Stack Overflow 上联系他们。

转到 Stack Overflow

发现错误或缺少功能？

AMP 项目强烈鼓励您的参与和贡献！我们希望您能成为我们开源社区的长期参与者，但我们也欢迎您为特别感兴趣的问题做出一次性贡献。

转到 GitHub