01
先选布局模型
Grid 用于命名区域和行列；Flex 用于一排或一列项目。切换模式会保留两套设置。
- 初始 Grid 示例已有四个矩形区域。
前端布局工具
CSS 布局生成器— 画出布局，再复制代码
在同一画布切换 Grid 与 Flex，调整参数后核对预览和配套代码。
CSS 布局生成器
先选起点，再选矩形对角。
.layout {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: auto auto auto;
gap: 16px;
grid-template-areas:
"header header header"
"sidebar main main"
"footer footer footer";
}
.area-header { grid-area: header; }
.area-sidebar { grid-area: sidebar; }
.area-main { grid-area: main; }
.area-footer { grid-area: footer; }
@media (max-width: 640px) {
.layout {
grid-template-columns: 1fr;
grid-template-rows: none;
grid-template-areas: "header" "sidebar" "main" "footer";
}
}布局参数只保留在当前浏览器标签页，不上传，也不保存历史。
代码和预览已更新。
做带侧栏的页面骨架时，手写 grid-template-areas 容易数错格子。CSS 布局生成器先把三行三列和命名区域画出来，区域占了哪些格一眼可见。
做导航或卡片行时，切到 Flex 调整主轴与交叉轴。这个 CSS 布局生成器会保留 Grid 参数，切回页面骨架时不用重新输入。
为什么用 CSS 布局生成器
同一份状态驱动画布、预览和导出代码。
两种布局留在同一个工作台
CSS Grid 网格生成器适合二维页面骨架，Flexbox 布局生成器适合单轴排列。切换模式后，各自的间距和方向仍在，便于对照而不必开两个页面。
手机预览对应真正的媒体查询
响应式栅格预设会生成 640px 以下纵向堆叠的 @media 规则。桌面、平板、手机预览读取同一份输出，缩窄预览不是只把画布缩小。
让画布和代码保持一致
02
调整轨道并绘制区域
列和行可填写 fr、px、auto 或 minmax()。选择区域名后依次点矩形两角；不规则区域会被拒绝。
- 关闭自动生成后，可按 Ctrl/Cmd+Enter 手动更新。
03
检查窄屏输出
把预览切到 390px，确认堆叠后的顺序。结果过期时复制和下载会禁用，避免拿到旧代码。
- 只有开启手机堆叠预设时才输出媒体查询。
从布局参数到配套代码
命名区域画布
grid-template-areas 可视化编辑后，HTML 子项和 grid-area 规则使用同一个名称，不必手工逐项对应。
Flex 容器参数
方向、换行、主轴与交叉轴对齐、项目数和 gap 都能调整，预览使用浏览器实际布局引擎。
响应式代码输出
移动端预设输出真正的媒体查询，复制 CSS、复制 HTML 或下载独立文件都使用当前结果。
区域、轨道和响应式边界
- 区域必须为矩形
- grid-template-areas 可视化画布拒绝覆盖、分离或 L 形的同名区域；这类 CSS 声明会被浏览器忽略。无效操作不会覆盖最后一份有效布局。
- 轨道值需要合法
- 支持 1fr、200px、auto、minmax(120px, 1fr) 等轨道尺寸。输入无效值时会阻止重新生成，也不能复制过期结果。
- 只生成一个移动端断点
- 默认在 640px 以下堆叠。平板和桌面按钮仅切换预览宽度，不生成独立断点，也不输出 Tailwind、SCSS 或 React。
- HTML 是布局骨架
- Grid 输出命名区域，Flex 输出编号项目；不会读取已有网页、上传文件或编辑完整页面内容。
CSS 布局生成器常见问题
该选 Flex 还是 Grid？
同时需要行列控制时选 Grid；只需沿单一方向分配项目时选 Flex。CSS 布局生成器将两种模式放在同一页，并保留各自参数。
断点值如何确定？
先在预设中选择移动端堆叠，再看 390px 预览；断点应围绕内容何时拥挤来定。本工具固定输出 640px 断点，不提供任意断点编辑。
CSS Grid 网格布局如何生成代码？
调整列数、行数和轨道值，给格子命名后即可得到容器 CSS 与对应的 HTML。CSS 布局生成器会检查区域矩形性。
grid-template-areas 为什么不起作用？
行宽不一致、区域名不匹配或同名区域不成矩形，都可能令声明失效。这里会拒绝非矩形绘制，避免复制无法生效的代码。
网格生成过程会上传布局配置吗？
不会。布局计算与预览都在当前浏览器中进行，没有上传入口；导出由你主动复制或下载。
还有没覆盖的布局问题？