在MasterGo中为界面添加网格系统需先将目标区域转为容器（Cmd/Ctrl+Shift+C），关闭自动布局后方可设置；支持基础网格（如16px图标对齐）和栅格列（如12列响应式布局），可叠加多种网格类型并独立控制显隐。
在MasterGo中为界面添加网格系统，是为了让图标、按钮、卡片等元素对齐更精准，避免手动拖拽导致的像素偏差，尤其在设计响应式网页或移动端布局时，能快速建立视觉秩序和开发对齐基础。
确认容器是使用网格的前提
布局网格只能加在容器上，不能直接加在普通图层、组或画板上。如果你选中的是一个普通矩形或文字图层，右侧属性栏根本不会出现「布局网格」选项。
先选中目标区域→右键→选择「转换为容器」，或者用快捷键 Cmd/Ctrl + Shift + C；【必须是容器，否则后续所有操作都无法进行】
注意：如果该容器已启用「自动布局」，则无法再添加布局网格——需先在属性栏关闭自动布局，才能看到加号按钮。
添加并设置基础网格（适合图标/小控件精排）
选中容器后，在右侧属性栏找到「布局网格」→点击「+」号，会自动生成一个默认类型为「网格」的8×8像素网格。
点击网格左侧的图标，打开设置弹窗：
① 类型下拉选「网格」；② 将「尺寸」改为16，更适合中等尺寸图标对齐；③ 颜色建议设为浅灰（如#E0E0E0），避免干扰视觉判断；④ 可勾选「仅预览」，这样导出时不会包含网格线。
这一步操作起来很简单，直接把文件拖进去就行。但要注意：改完尺寸后，已放置的子元素不会自动吸附，需手动拖动靠近网格线，才会触发吸附提示（蓝色虚线+“吸附”文字）。
配置栅格列实现响应式布局
当你要设计网页头部、内容区或移动端列表时，栅格列比基础网格更实用——它能随容器宽度变化自动调整列宽与间隙。
方法一：新建栅格列
在「布局网格」区域点「+」→类型选「栅格列」→设置数量为12（主流响应式框架常用值）→列宽留空（即设为自动）→槽宽填16（列间间距）→偏移填24（左右边距）。
方法二：复用已有栅格列样式
若团队已建好「PC端12列栅格」样式，可在弹窗右上角点击「从样式库添加」→搜索关键词“12col”→直接插入。这样能确保所有页面列数、槽宽、偏移完全一致，避免协作时各自定义造成混乱。
【偏移值必须小于容器总宽的一半，否则栅格会不可见】
组合使用多种网格类型
一个容器内可同时存在多个网格：比如外层用「栅格列」控制整体分栏，内部某个图标区再叠加一层「网格」（尺寸4）用于像素级对齐。
点击「+」添加第二个网格→类型选「网格」→尺寸设为4→颜色调成淡青（#C5F1F9），与栅格列颜色区分；
两个网格会同时显示，MasterGo会按添加顺序分层渲染，后添加的网格线压在前一个上面；
想临时隐藏某一层，只需点击对应网格行右侧的眼睛图标即可，不影响其他网格生效。
