三栏布局卡死
前端新手在 CodePen 上写一个三栏博客模板，左边 200px 固定导航，右边 300px 侧边栏，中间自适应。手写 grid-template-columns 时试了 5 种写法，要么右侧被挤扁，要么中间宽度溢出。把需求输入本工具，左侧和右侧填固定值，中间用 1fr，实时预览看到三栏按预期排列，复制生成的 CSS 直接贴进项目，不用再反复刷浏览器。
轨 道Tracks · 列 / 行数量
列数 columns
3
行数 rows
3
尺 寸每条列 / 行轨道单位可编辑
间 距Gap
列间距 column-gap
12px
行间距 row-gap
12px
对 齐Alignment · 单元格 / 整体轨道
justify-items 横向·单元
align-items 纵向·单元
justify-content 横向·轨道
align-content 纵向·轨道
网格项Items · 预览框选合并
在右侧预览中按住拖框，跨选多个单元格后松手即可合并为一个网格项（生成 grid-column / grid-row 跨度）。可命名、删除、改名生成 grid-area。
预 设Layouts · 一键套用
就绪 · 可视化轨道 / 框选合并 / 实时导出 · 全程浏览器本地处理
第一节
关于本工具
About打开浏览器开发者工具，敲了一下午的 grid-template 声明，预览一跑，布局全塌了——这是很多前端开发者都遇到过的场景。Grid 生成器把 CSS Grid 的列、行、间距和区域名拆成直观的滑块与输入框，拖拽调参的同时实时渲染布局，并同步输出可复制的 grid-template 声明。所有计算在浏览器本地完成，输入的配置数据不上传服务器，适合在本地原型设计或调试阶段快速验证栅格方案。
使用场景
响应式断点调试
设计师交付一套 PC 端 4 列网格、平板端 2 列、手机端 1 列的布局稿。手写 @media 查询时，每次改断点都要切到浏览器 DevTools 调网格线，反复改 3 次才对齐。把 4 种断点下的列数和间距输入本工具，每个断点生成独立的 grid-template，复制后只改媒体查询的 min-width 阈值，布局在 3 种屏幕尺寸下一次性通过验收。
卡片列表等间距
电商运营要在首页展示 8 个商品卡片，每行 4 个，卡片之间留 16px 间隙。手动写 grid-gap 时发现最后一排只有 2 张卡片，左侧空出一大块，用 justify-content: space-between 也调不好。在工具里设 4 列、gap 16px，勾选「自动填充空位」选项，预览看到最后 2 张卡片自动居中对齐，复制代码后运营在后台编辑器直接粘贴，卡片排列和设计稿一致。
杂志式瀑布流
内容编辑要做一个「热门推荐」区块，3 张图：一张横图占 2 列 1 行，两张竖图各占 1 列 2 行，拼成 L 形布局。手写 grid-template-areas 时，区域命名和排列顺序总是对不上，预览显示图片重叠。把 3 张图的占位参数（横图跨 2 列、竖图跨 2 行）输入本工具，自动生成 area 命名矩阵，导出后图片按 L 形排列，编辑直接上传素材，区块上线后点击率比普通列表高 12%。
后台表格列宽锁定
内部 CRM 系统需要展示客户列表：姓名列固定 100px，手机号列固定 150px，备注列自适应。用 table 布局时，备注列内容过长会把前两列挤变形。改用 grid 后，把前三列设为固定值，最后一列设 1fr，并用 overflow: hidden 截断长文本。本工具能预览截断效果，调整列宽后导出，CRM 页面在 200 条数据下保持列宽不变，运营人员不再抱怨表格错乱。
第二节
使用指南
Getting Started使用步骤
- 1在「列数」和「行数」输入框分别设定网格行列数（如 3 列 2 行），右侧预览区同步生成对应网格骨架
- 2拖动「列宽」与「行高」滑块调整各轨道尺寸，预览区网格单元格实时缩放，数值同步显示于输入框
- 3点击「间距」输入框设置网格间隙（单位 px），预览区网格线间距即时变化，底部 CSS 代码块同步更新
- 4勾选「合并单元格」后，在预览区点击相邻单元格可合并，合并区域高亮显示，CSS 代码自动追加 grid-area 属性
- 5点击「导出 CSS」按钮，代码块内容复制到剪贴板，页面顶部显示「已复制」提示条
输入输出示例
| 输入 | 输出 | 说明 |
|---|---|---|
| grid-template-columns: 1fr 1fr 1fr; grid-template-rows: auto; grid-template-areas: "a b c"; | display: grid; grid-template-columns: 1fr 1fr 1fr; grid-template-rows: auto; grid-template-areas: "a b c"; | 常规：三列等宽 + 一行自适应，验证最基础的三列布局输出，确保 fr 单位与 areas 对应正确 |
| grid-template-columns: repeat(3, minmax(100px, 1fr)); grid-template-rows: 200px 100px; | display: grid; grid-template-columns: repeat(3, minmax(100px, 1fr)); grid-template-rows: 200px 100px; | 常规：使用 repeat() + minmax() 函数，验证函数嵌套解析与输出完整性，常见于响应式布局 |
| grid-template-columns: 1fr; grid-template-rows: 1fr; | display: grid; grid-template-columns: 1fr; grid-template-rows: 1fr; | 边界：单列单行最小 grid，验证工具对极简输入的处理，不产生多余空行或默认值 |
| grid-template-columns: 0px; grid-template-rows: 0px; | display: grid; grid-template-columns: 0px; grid-template-rows: 0px; | 边界：零尺寸轨道，验证工具是否保留 0px 而非忽略或报错，用于隐藏区域布局 |
| grid-template-columns: 100px auto 200px; grid-template-rows: 50% 50%; | display: grid; grid-template-columns: 100px auto 200px; grid-template-rows: 50% 50%; | 常规：混合单位（px / auto / %），验证不同单位解析与输出顺序，常见于固定+弹性混合布局 |
| grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; grid-template-areas: "a b" "c d"; | display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; grid-template-areas: "a b" "c d"; | 常规：2×2 网格 + 命名区域，验证多行 areas 的换行输出格式，确保引号与空格正确 |
| grid-template-columns: 1fr 1fr 1fr; grid-template-rows: 100px; grid-template-areas: "a a b"; | display: grid; grid-template-columns: 1fr 1fr 1fr; grid-template-rows: 100px; grid-template-areas: "a a b"; | 易错：区域名重复（a 占两列），验证工具是否保持重复名称不变，常见于合并单元格场景，易被误删 |
| grid-template-columns: 200px 200px; grid-template-rows: 100px 100px; grid-template-areas: "header header" "sidebar content"; | display: grid; grid-template-columns: 200px 200px; grid-template-rows: 100px 100px; grid-template-areas: "header header" "sidebar content"; | 易错：区域名含多个单词（header / sidebar / content），验证工具对非单字母区域名的支持，避免截断或空格错误 |
常见错误对照
1.grid-template 简写顺序写反
✗ 错误
grid-template: 1fr 2fr / 100px 200px✓ 修复
grid-template: 100px 200px / 1fr 2frgrid-template 简写先写行（rows）后写列（columns），与 grid-template-rows / columns 的顺序一致。写反会导致行列尺寸互换，布局完全错乱。
2.fr 单位与固定单位混用时忘记总空间
✗ 错误
grid-template-columns: 300px 1fr 2fr✓ 修复
grid-template-columns: 300px 1fr 1frfr 分配的是剩余空间（总宽减去固定宽度后）。上例中 300px 固定后，剩余空间被 1+2=3 份分，1fr 只占 1/3，并非预期的一半。若想 1:1 分配剩余，应写 1fr 1fr。
3.repeat() 里用 fr 时漏写单位
✗ 错误
grid-template-columns: repeat(3, 1)✓ 修复
grid-template-columns: repeat(3, 1fr)repeat() 内只写数字 1 会被解析为 1px，而非 1fr。fr 是 CSS Grid 专有单位，必须显式写出，否则各列会变成 1px 宽，几乎不可见。
4.minmax() 里最小值大于最大值
✗ 错误
grid-template-columns: minmax(300px, 200px)✓ 修复
grid-template-columns: minmax(200px, 300px)minmax() 语法要求第一个参数 ≤ 第二个参数。若最小值大于最大值，浏览器会忽略整个 minmax()，回退到 auto，导致列宽不受控。
5.auto-fill 与 auto-fit 混淆
✗ 错误
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr))✓ 修复
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr))auto-fill 会保留空轨道（即使没有子项），auto-fit 会折叠空轨道。当子项数量少于轨道数时，auto-fill 会留下空白区域，auto-fit 则让子项拉伸填满。
6.grid-area 命名与模板中名字不匹配
✗ 错误
grid-area: header; 但模板写 grid-template-areas: 'head main'✓ 修复
grid-area: header; 模板写 grid-template-areas: 'header main'grid-area 的名字必须与 grid-template-areas 中声明的区域名完全一致（大小写敏感）。名字不匹配时，该元素不会进入命名网格，而是按自动排列规则放置。
7.隐式网格尺寸未设置导致溢出
✗ 错误
grid-template-rows: 100px; 然后放入 5 个子项✓ 修复
grid-template-rows: 100px; grid-auto-rows: 100px;grid-template-rows 只定义显式行。超出定义行数的子项进入隐式网格，默认尺寸为 auto（内容高度）。若未设置 grid-auto-rows，后续行高度可能撑破容器。
8.gap 写在 grid 简写里但顺序错误
✗ 错误
grid: 100px / 200px 10px✓ 修复
grid: 100px / 200px; gap: 10px;grid 简写不支持 gap 参数。在 grid 简写末尾加数字会被解析为 grid-template-rows 或 columns 的一部分，导致行列定义错误。gap 必须单独声明。
第三节
工作原理
How It Works核心公式
grid-template-columns: repeat(n, fraction); grid-template-rows: repeat(m, fraction); 总列数 = n, 总行数 = m
变量说明
n列数，正整数m行数，正整数fraction每列/行占的份数，如 1fr
示例
设计 3 列 2 行网格，每列等宽 1fr，每行等高 1fr：grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(2, 1fr); 容器宽 900px、高 600px 时，每列宽 900÷3=300px，每行高 600÷2=300px。
用户输入
本地处理
输出结果
第五节
常见问题
Q & A问这个 grid 生成器怎么用？我拖拽了但没反应。＋
答
本工具不是拖拽式布局，而是通过可视化参数面板来生成 CSS grid-template 代码。你需要在面板里设置行数、列数、间距、对齐方式等属性，右侧会实时预览网格效果。如果点击后没变化，检查是否填写了有效的列宽或行高值（如 1fr、100px、auto），空值会导致预览区不渲染。所有操作都在浏览器端完成，无需等待服务器响应。
问生成的 grid 代码直接复制到网页上能用吗？＋
答
可以直接用。工具输出的代码是标准 CSS grid-template 属性值，兼容所有现代浏览器（Chrome、Firefox、Safari、Edge）。复制后粘贴到 CSS 文件的对应选择器里即可。唯一需要注意：代码只包含 grid 容器本身的属性（display: grid; grid-template-columns: ...; grid-template-rows: ...; 等），不包含子元素的 grid-column / grid-row，如需子元素定位需自行补充。
问为什么我设置了 3 列但预览只显示 2 列？＋
答
常见原因是列宽值写错了。例如写 `1fr 1fr` 只定义了 2 列，而期望 3 列应写 `1fr 1fr 1fr` 或使用 `repeat(3, 1fr)`。另外检查是否在列宽中混入了无效单位或空格（如 `100 px` 中间有空格会被解析为两个值）。本工具预览区会严格按你输入的属性渲染，不会自动补全缺少的列。
问这个工具和那些在线拖拽布局工具有什么区别？＋
答
主要区别在于控制粒度。拖拽工具适合快速搭建大致框架，但精确控制每列每行的比例、间距、对齐方式时，拖拽往往不如直接输入参数精确。本工具面向需要精准 CSS 输出的人群——比如前端开发者、设计转代码的工程师，他们需要生成的代码零误差、可直接用于生产环境。拖拽工具生成的代码往往带有冗余类名或内联样式，本工具只输出最干净的 grid-template 属性。
问生成的 grid 代码在手机上显示不对怎么办？＋
答
本工具默认输出固定列数和行数，没有内置媒体查询。如果手机显示不对，需要自己加响应式断点。建议在生成的代码基础上，用 `@media (max-width: 768px)` 改写 grid-template-columns 为单列（如 `1fr`）。工具本身定位是生成一个基准网格，不替你做整站响应式方案——这是 CSS 布局的正常工作流程。
问我电脑上预览正常，但同事打开说布局乱了，可能是什么原因？＋
答
大概率是浏览器版本差异。本工具生成的 grid 语法需要浏览器支持 CSS Grid Level 1（Chrome 57+、Firefox 52+、Safari 10.1+、Edge 16+）。如果同事用的是旧版浏览器（如 IE11、Safari 9 以下），grid 属性可能部分不支持。可以在 Can I Use 网站上查一下同事的浏览器版本。另外检查是否用了 `gap` 属性，旧版浏览器可能需要 `grid-gap` 作为回退。
问这个工具会不会把我的网格布局数据上传到服务器？＋
答
不会。本工具所有计算和渲染都在浏览器本地完成，没有任何数据发送到服务器。输入的行列参数、预览的网格状态均只存在于当前页面的内存中，刷新页面或关闭标签页后数据即消失。不需要注册、登录，也不会有任何网络请求用于处理你的布局数据。隐私方面可以放心。
问我填了 1fr 和 100px 混合的列宽，为什么预览里 fr 那列看起来特别大？＋
答
这是 CSS Grid 的正常行为。`fr` 单位分配的是剩余空间，而 `px` 是固定值。假设容器宽度 500px，其中一列固定 100px，剩余 400px 由 `1fr` 的那列独占，所以它看起来很大。如果希望比例更均衡，可以给所有列都用 `fr`（如 `1fr 2fr 1fr`），或者用 `minmax()` 给 fr 列设置最小/最大限制。工具预览区会如实反映这种空间分配逻辑。
隐私保证所有计算与处理均在你的浏览器本地完成，输入数据不会上传服务器，也不会保存或共享。