网格区域

网格区域让您能够制作可重复使用的布局，并且可以轻松重新排列。将网格子项插入网格区域，移动区域，然后观察所有内容如何随区域调整 — 自动更新网格的每次出现。

通过利用网格区域，您可以：

• 建立可重复使用的网格布局
• 通过重新组织区域来修改各种设备上的网格布局
• 同时升级网格布局的多个实例

通过本文，您将发现：

1. 如何设计带有网格区域的布局
2. 如何在网格区域中包含、放置和对齐内容
3. 如何重新定位和调整网格区域的大小
4. 如何构建适合不同屏幕尺寸的网格区域
5. 如何利用网格区域回收布局
6. 如何检查网格的可访问性
7. 常问问题

如何设计带有网格区域的布局

一旦建立了网格，您就可以在网格上勾勒出区域以生成可重复使用的布局。

划定网格模板区域

您可以直接在画布上插入网格区域。进入网格编辑模式，将鼠标悬停在网格单元格上，然后单击“加”图标。添加网格区域后，您可以单击并拖动角落以包含并重新定位该区域。您也可以单击区域标签并在设置模式中指定位置，或导航到 样式面板，单击区域标签，定义位置。

识别区域

要为网格区域分配名称，请访问网格编辑模式，单击区域标签，然后输入 姓名。网格区域名称可用于描述区域的作用（例如“页脚”）或其包含的内容类型（例如“主图像”）。

如何在网格区域中包含、放置和对齐内容

定义网格区域后，您可以将元素合并到每个网格区域中。这些元素将成为该区域的网格子元素，并将自动随区域调整。

要重新定位网格内的元素，请选择元素，导航至 样式面板 > 网格子项 > 位置，将其设置为 区域，并从中选择要放置元素的区域 网格区域 落下。

对齐区域内的内容

位于区域内的网格子项将从父网格继承对齐设置。要修改区域内单个网格子项的对齐方式，请选择网格子项，访问 样式面板 > 网格子项 > 对齐，然后选择所需的对齐设置。

如何重新定位和调整网格区域的大小

网格区域内的任何元素都会移动并调整大小 和 该区域。

要移动区域，请进入网格编辑模式并将区域拖到新位置。要调整区域大小，请拖动其角。由于区域不能重叠，您可能需要先调整其大小，然后再重新跨越区域。

如何针对不同的屏幕尺寸开发网格区域

在针对各种屏幕尺寸进行设计时，修改区域尤其有用。您可以在各个断点处重新定位和调整区域大小，以更改不同设备上的布局。

如何利用网格区域回收布局

父网格类与您定义的每个网格区域相关。要回收网格区域布局，请将父网格类应用于另一个元素（例如 div 块）。随后，您可以将内容拖入新的网格区域并使用新内容构建相同的布局。

例如，这种方法有利于生成可重复使用的页面布局。您可以划定页眉区域、主内容区域和页脚区域。或者，您可以用图像区域和文本区域形成卡片布局。

修改多个出现的网格区域

这些网格区域布局的功能类似于组件。您可以通过修改单个网格区域布局实例来快速更新整个站点上该网格区域布局的所有实例。修改网格区域布局时请务必小心，因为这可能会影响内容定位。如果您需要调整单个网格区域，您可以随时使用组合类。

如何检查网格的可访问性

与手动定位的网格子元素一样，网格区域子元素在网格中也有明确的轮廓。当这些子元素随网格区域一起调整时，它们在 document 顺序中的位置保持不变。在网格中移动区域时请注意这一点，以确保站点可访问性。确认您移动区域是为了组织目的，并且阅读顺序不会受到影响。

重新排列显式网格子项 航海家 以符合您希望用户阅读内容的顺序。此操作不会影响这些网格子项在页面上的定位。

常问问题

如果我重命名或删除某个区域会发生什么情况？

当您移除某个区域时，位于该区域中的网格子项将转换为自动生成的行和列。要恢复这些子项，请重新插入具有相同名称的区域。

如果我将多个元素插入网格区域会发生什么情况？

元素将重叠。您可以在导航器中重新排列这些元素，或利用 z-index 调整重叠顺序。

我可以在网格区域的单元格中插入网格子项吗？

是的，自动定位或手动定位的网格子项可以占据同样属于某个区域的单元格。

例如，您可以生成具有背景颜色的跨越网格区域。随后，您可以在网格单元格中插入手动定位的标题内容：

1. 创建一个横跨第一行 4 列的“标题”网格区域
2. 在“标题”网格区域内放置一个 div 块并定义背景颜色
3. 手动将徽标放置在第 1 列第 1 行
4. 手动定位导航栏并将其横跨第 1 行第 2 列至第 4 列

我可以为收藏列表划定网格区域吗？

您无法为收藏列表描绘网格区域，但您可以为收藏列表内的收藏项描绘网格区域。