用法
有效子元素
屬性
樣式
- 範本
  - fill
  - vertical
  - horizontal
  - thirds
- 預先範本化的 UI
  - 橫向對半 UI
  - 現代 aspect-ratio
    - 前景
    - 背景

重要事項：本文件不適用於您目前選取的格式電子郵件！

amp-story-grid-layer

描述

AMP 故事單頁的單一層，以網格佈局定位其內容。

必要指令碼

<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：外觀比例圖層向上縮放以涵蓋信箱邊界。可能僅包含背景素材 (圖片或影片)。
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>

現代 aspect-ratio

網格層上的回應式預設值可最大化前景元素的可使用螢幕空間，並一致地縮放素材。

<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 預設值。此預設值使用背景素材涵蓋大多數行動電話上的整個螢幕。它在沒有信箱效果的情況下執行此操作，並使定位與前景元素保持一致。雖然此技術提供最一致的使用者體驗，但可能會裁剪背景的一個或所有邊框最多 7%。設計和挑選素材時請記住這一點。

此預設值可能會在沒有傳統手機螢幕尺寸的裝置 (例如平板電腦或摺疊式手機) 上顯示信箱效果。您可以變更頁面的背景顏色以符合背景，以獲得最佳視覺效果。

需要更多協助嗎？

您已閱讀本文件十幾次，但它仍然沒有真正涵蓋您的所有問題嗎？也許其他人也有同感：在 Stack Overflow 上與他們聯繫。

前往 Stack Overflow

發現錯誤或缺少功能？

AMP 專案強烈鼓勵您的參與和貢獻！我們希望您能成為我們開放原始碼社群的持續參與者，但我們也歡迎針對您特別熱衷的問題提供一次性貢獻。

前往 GitHub