布局网格
网格是设计中组织布局的常用工具。在 Motiff 妙多中，像素网格可以让你精确控制图层的位置，布局网格则可以让你更灵活更简单地控制布局。
关于布局网格
布局网格是帮助你对齐和布局的辅助工具，不仅可以为设计提供可视化的布局结构，而且能够在设计尺寸变化时保持布局的逻辑性和一致性。
布局网格只能应用于容器。你可以将其应用于最外层容器，也可以将其应用于非外层容器。
添加布局网格
布局网格可以应用于任何容器。组件也是容器。
你可以通过以下步骤添加布局网格：
- 1.选中容器图层后，在设计面板中的布局网格模块点击
。 - 2.Motiff 妙多默认在容器内添加网格。
- 3.你可以点击
修改属性。
布局网格属性
Motiff 妙多支持三种布局网格的类型：网格、行、列。
你可以点击 
更改布局网格的类型。
网格
网格适用于需要精确控制尺寸的场景，如：设计图标等。
你可以调整网格的尺寸和颜色。比如：在默认尺寸大小为 10 的网格中，每个方格的边长为 10 px。
行和列
行和列适用于网页和移动设备的响应式界面设计。
对于行和列，你可以定义它们的高度或宽度、数量、颜色等属性。
- 布局方式：Motiff 妙多支持固定和拉伸的布局方式。
- 固定：能够使布局网格固定在容器的某一位置。比如，布局网格类型为「行」时，固定方式有上、下、居中。
- 拉伸：能够使布局网格自动适应容器的尺寸，响应容器尺寸的变化。
当布局方式不同时，可设置的属性也可能不同。
- 偏移：当布局方式分别为上、下、左、右时，可以通过偏移控制行和列到对应方向边界的距离。
- 边距：当布局方式为拉伸时，可以通过边距控制创建的行和列到两侧边界的距离。
- 间距：你可以通过间距设置调整每列或每行之间的距离。
你可以单独使用一个布局网格，也可以重复上述步骤以添加多个布局网格，将它们组合起来以组织更复杂的布局。
显示和隐藏布局网格
当你暂时不需要布局网格但又不想直接删除它们时，可以切换布局网格的可见性，以避免不必要的视觉干扰。
显示和隐藏所有布局网格
你可以在工具栏的「查看/缩放选项」中选择「布局网格」以显示或隐藏文件中所有的布局网格。
你也可以使用键盘快捷键进行切换：
- macOS：⇧ Shift + G
- Windows：Shift + G
显示和隐藏单个布局网格
你可以在设计面板中显示或隐藏单个布局网格。
- 1.选中已添加布局网格的容器。
- 2.在设计面板中找到布局网格模块。
- 3.点击
/ 
，即可隐藏或显示对应的布局网格。
布局网格样式
布局网格可以被创建为样式，以便在设计中重复使用。
创建布局样式
- 1.选中需要创建样式的图层。
- 2.在设计面板中，点击布局网格右侧的
，打开样式选择器。 - 3.点击样式选择器右上角的
。
- 4.在创建样式的弹窗中输入样式的名称，并点击创建。
使用布局样式
- 1.选中需要使用样式的图层。
- 2.在设计面板中，点击布局网格模块右侧的 ，打开样式选择器。
- 3.在样式选择器中，你可以看到本地样式和引用的团队组件库中的样式。
- 4.选择需要使用的样式即可在图层上应用该样式。
布局网格和约束
当容器中添加了布局网格，其内部图层的约束可能受布局网格影响。
水平方向约束为左、右、左右、居中时，约束将以离它最近的列为参考。
垂直方向约束为上、下、上下、居中时，约束将以离它最近的行为参考。