布局双刀 · Flex 与 Grid
英文：flexbox and grid（按单词直读）
界面与交互难度：进阶 ★★
🗣️一句话大白话
CSS 布局两把刀：Flex 管「一行或一列内怎么排」（一维），Grid 管「整页切成行列格子」（二维）。AI 写布局用的就是这两个，知道用哪个=能看懂它改得对不对。
🎬真实场景
导航栏几个按钮水平排列——Flex；后台「侧边栏+头部+内容区」的骨架——Grid。AI 混用不算错，但你要「三列等宽卡片」它却用 Flex 硬凑，就该问一句为什么。
📮你可以这样说
「「页面骨架用 Grid（侧边栏 240px + 内容自适应），列表项内部用 Flex 排列。每处布局注明用的哪个、为什么。」」
通过 AI绘图 工作台生成（模型 API 额度由此消耗）；未配置模型密钥时会提示失败原因。
⚠️边界与常见误解
- ▸「一维 Flex、二维 Grid」是经验起点不是铁律
- ▸老浏览器兼容问题基本不用管：两大布局已是标准
- ▸布局嵌套别超过三四层：再深的页面改起来是噩梦
🕸️知识关系图
这个词条与相关术语、AI绘图 知识的连接关系