MasterGo AI 可根据文字描述直接生成带分栏结构的官网页面。需明确描述栏位划分与功能，如“顶部导航+左侧菜单+右侧内容区”；选择“网页版”输出模式以确保横向分栏；生成后转为自动布局并搭配栅格网格提升对齐精度。
☞☞☞AI 智能聊天, 问答助手, AI 智能搜索, 多模态理解力帮你轻松跨越从0到1的创作门槛☜☜☜
MasterGo AI 能直接根据文字描述生成带分栏结构的官网页面，比如“顶部导航+左侧菜单+右侧内容区”这类经典布局，不用手动拖拽对齐，10分钟内就能出初稿。
明确描述分栏结构和用途
在 AI 生成界面输入时，别只说“做个官网”，要具体说明栏位划分和功能。例如：
- “生成一个企业官网首页：顶部固定导航栏（含Logo、4个菜单项）、左侧垂直侧边栏（宽度240px，含3个二级菜单）、主内容区占剩余宽度，展示3列卡片式产品介绍”
- “网页版，暗色模式，主区域采用三栏等宽响应式布局（左：目录树；中：文章正文；右：相关推荐）”
AI 会识别“左侧”“右侧”“三栏”“等宽”“固定宽度”等关键词，自动匹配栅格逻辑或 Flex 布局结构。
选对输出模式并指定设备类型
进入 AI 生成页后，先确认顶部切换按钮是否为“网页版”——官网分栏通常基于桌面端视口设计，选“移动端”会导致 AI 默认单列流式布局，无法体现横向分栏效果。
如果需要适配多端，可在生成后用 MasterGo 的约束功能快速设置各栏锚点：比如让左侧栏始终贴左、主内容区左右留白自适应、右侧栏固定距右边缘 24px。
生成后用自动布局优化栏内元素
AI 输出的分栏容器是静态图层组，要让它真正“可编辑、可扩展”，需手动转为自动布局：
- 选中整个左侧菜单区域 → 按 Shift+A 添加垂直自动布局，设置间距 12px，上下边距 16px
- 选中主内容区的三列卡片 → 添加水平自动布局，启用“换行”，设列间距 24px，容器宽度设为“填充父级”
- 这样增删菜单项或卡片时，栏位高度/宽度会自动重排，不用反复调整位置
搭配布局网格提升对齐精度
对要求严格的官网分栏（如金融、SaaS 类产品），建议在顶层容器启用栅格列：
- 选中画布根容器 → 右侧属性面板点「布局网格」→ 「+」添加 → 类型选“栅格列”
- 设数量为 12（标准 12 栅格系统），列宽 72px，槽宽 24px
- 再把导航栏设为跨 12 列、侧边栏设为跨 3 列、主内容区跨 9 列，AI 生成的图层会自动吸附到栅格线上
注意：自动布局和布局网格不能共存于同一容器，优先用自动布局管内容流，用布局网格控整体框架。
