Figma 自动布局转 CSS Grid 完整指南

TL;DR

• 自动布局的一维流动用 Flex，二维布局用 Grid 更合适。
• 在 Figma 里先明确行/列结构，层级越清晰，Grid 越干净。
• 导出后校验 Tailwind 间距与断点配置。

什么时候该用 Grid

自动布局默认是线性结构，但当卡片需要跨行/跨列或内容高度差异明显时，CSS Grid 更能稳定对齐。

适合 Grid 的场景

• 需要二维排布（行 + 列）。
• 需要跨列对齐或固定对齐线。
• 内容高度差异较大，但仍要对齐。

适合 Flex 的场景

• 单行或单列的线性排布。
• 内容驱动尺寸，不需要固定行列。
• 希望规则更简单、CSS 更轻量。

自动布局到 CSS Grid 的映射

重点是还原设计意图，而不是像素级复制。可参考以下映射：

实操流程

1. 在 Figma 中先按行/列分组。
2. 给 Frame/组件命名，保证导出类名可读。
3. 确定列数与断点策略（如 2/3/4 列）。
4. 导出后对齐间距到设计系统 Token。
5. 用 minmax() 或断点类完善响应式。

Tailwind 映射建议

• 以 grid + gap-* 起步。
• 固定列用 grid-cols-*，流式列用 grid-cols-[repeat(auto-fit,minmax(240px,1fr))]。
• 间距严格对齐项目配置（如 gap-4、gap-6）。

响应式策略

• 移动优先：先单列，再在 md/lg 增加列数。
• 内容感知列：用 auto-fit + minmax 减少空洞。
• 溢出检查：重点关注长标题和可变高度卡片。

常见坑

• 过度嵌套 Frame，产生多余 Grid 容器。
• 忽略内容本身尺寸，导致行高不一致。
• 导出间距不在 Tailwind 标尺内。

上线前检查清单

• Grid 间距与设计系统一致。
• 断点符合产品布局规则。
• 组件可在其他页面复用。

常见问题

是否所有自动布局都该转 Grid？
需要二维控制时才用 Grid，其余场景 Flex 更简单。

必须用插件吗？
不是必须，但导出工具能明显节省时间。Figma 转代码工具里有选项。

如何避免布局抖动？
设置稳定的列宽，并用真实内容测试。

推荐工具

在工具对比页查看对自动布局支持较好的工具。

下一步

• 浏览 Figma 转代码 专题。
• 查看 对比指南 的响应式建议。