網格區域

網格區域使您能夠製作可重複使用的排列，並且可以輕鬆地重新排列。將網格子項目插入網格區域，移動區域，並觀察所有內容隨區域調整 - 自動更新網格的每個出現。

透過利用網格區域，您可以：

• 建立可重複使用的網格佈局
• 透過重新組織區域來修改各種設備上的網格佈局
• 同時升級網格佈局的多個實例

透過本文，您將發現：

1. 如何設計有網格區域的佈局
2. 如何在網格區域中包含、放置和對齊內容
3. 如何重新定位網格區域並調整其大小
4. 如何為不同的螢幕尺寸建立網格區域
5. 如何回收帶有網格區域的佈局
6. 如何檢查網格的可訪問性
7. 常問問題

如何設計有網格區域的佈局

建立網格後，您可以勾畫網格上的區域以產生可重複使用的佈局。

界定網格模板區域

您可以直接在畫布上插入網格區域。進入網格編輯模式，將滑鼠懸停在網格單元上，然後按一下“加” 圖示出現。新增網格區域後，您可以按一下並拖曳角落以包圍並重新定位該區域。您也可以點擊區域標籤並在設定模式中指定位置，或導航到 風格面板，按一下區域標籤，並定義位置。

確定區域

若要為網格區域指定名稱，請存取網格編輯模式，按一下區域標籤，然後輸入名稱 姓名。網格區域名稱對於描述區域的角色（例如，「頁腳」）或其將包含的內容類型（例如，「主影像」）很有用。

如何在網格區域中包含、放置和對齊內容

定義網格區域後，您可以將元素合併到每個網格區域。這些元素成為該區域的網格子元素，並將根據該區域自動調整。

若要在網格內重新定位元素，請選擇該元素，然後導覽至 風格面板 > 網格子 > 位置，將其設為 區域，然後選擇您希望在其中放置元素的區域 網格區域 落下。

對齊區域內的內容

位於區域內的網格子項目將從父網格繼承對齊設定。若要修改區域內單一網格子項的對齊方式，請選擇該網格子項，存取 風格面板 > 網格子 > 對齊，然後選擇所需的對齊設定。

如何重新定位網格區域並調整其大小

網格區域內的任何元素都會移動並調整大小 和 該區域。

若要移動區域，請進入網格編輯模式並將區域拖曳到新位置。若要調整該區域的大小，請拖曳其角落。由於區域不能重疊，因此您可能需要在重新跨越區域之前調整它們的大小。

如何為不同的螢幕尺寸開發網格區域

在針對各種螢幕尺寸進行設計時，修改區域尤其有利。您可以在各個斷點上重新定位區域並調整其大小，以變更不同裝置上的佈局。

如何回收帶有網格區域的佈局

父網格類別屬於您定義的每個網格區域。若要回收網格區域佈局，請將父網格類別套用至另一個元素（例如，div 區塊）。隨後，您可以將內容拖曳到新的網格區域中，並使用新內容建立相同的佈局。

例如，這種方法對於產生可重複使用的頁面佈局是有益的。您可以劃分頁首區域、主要內容區域和頁尾區域。或者，您可以形成具有圖像區域和文字區域的卡片佈局。

修改多次出現的網格區域

這些網格區域佈局的功能與元件類似。您可以透過修改網格區域佈局的單一實例來快速更新網站中網格區域佈局的所有實例。修改網格區域佈局時請務必小心，因為這可能會影響內容定位。如果您需要在一次出現時調整網格區域，則始終可以使用組合類別。

如何檢查網格的可訪問性

就像手動定位的網格子項一樣，網格區域子項在網格中明確概述。當這些子項隨著網格區域進行調整時，它們在 document 順序中的位置保持不變。在網格中移動區域時請注意這一點，以確保網站可訪問性。確認您出於組織目的而移動區域，並且閱讀順序不受其影響。

重新排列顯式網格子項 航海家 與您希望用戶閱讀您的內容的順序保持一致。此操作不會影響這些網格子項目在頁面上的定位。

常問問題

如果我重命名或刪除區域會發生什麼？

當您刪除某個區域時，位於該區域的網格子項目將轉換為自動產生的行和列。若要還原這些子項，請重新插入具有相同名稱的區域。

如果我將多個元素插入網格區域會發生什麼？

元素將重疊。您可以在導航器中重新排列這些元素或利用 z-index 來調整重疊順序。

我可以在屬於網格區域的單元格中插入網格子項目嗎？

是的，自動定位或手動定位的網格子項可以佔用也是區域一部分的儲存格。

例如，您可以產生具有背景顏色的跨度網格區域。隨後，您可以在網格單元格中插入手動定位的標題內容：

1. 建立一個跨越第一行 4 列的「標題」網格區域
2. 在「標題」網格區域中放置一個 div 區塊並定義背景顏色
3. 手動將徽標放置在第 1 列第 1 行中
4. 手動定位並跨越第 1 行第 2 列到第 4 列的導覽列

我可以為集合清單劃定網格區域嗎？

您無法為「集合」清單劃定網格區域，但可以為「集合」清單中的「集合」項目劃定網格區域。