CSS Grid 生成器

如何使用

1. 设置列数与行数（各 1 到 12），预览区按行列交叉画出格子。
2. 填写列轨道，如 1fr 2fr 1fr 或 repeat(2, 1fr) 240px；留空则每列都是 1fr。
3. 行轨道写法相同，如 auto 1fr auto；留空则由内容决定行高。
4. 设置间距，可写 12px，也可写行列两个值如 8px 16px；留空表示无间距。
5. 选择 justify-items、align-items、justify-content，控制格子在轨道内的对齐方式。
6. 从输出卡片复制 CSS 与 HTML。

常见用途

• 页面骨架：页头、侧栏、主区、页脚一次写成。
• 卡片墙：repeat(auto-fill, minmax(240px, 1fr)) 式响应式网格。
• 仪表盘面板：两侧固定、中间弹性的列。
• 表单布局：标签与输入框对齐，不用浮动或表格。
• 学习 grid：边改数字边看 fr、minmax、gap 的效果。

为何保证隐私

网格 CSS 由本页面内的字符串拼接生成，轨道取值与预览都不离开浏览器，工具可离线使用。

常见问题

问：接受哪些轨道写法？ 答：grid-template-columns/grid-template-rows 的合法取值都可以：fr、px、%、em、auto、min-content、max-content、minmax()、fit-content()、repeat()。工具只做字符筛查，拼错关键字会表现为预览异常而不是报错。

问：轨道字段留空会怎样？ 答：列回退为 repeat(n, 1fr)（n 为列数），不写 grid-template-rows 行；间距留空时连 gap 行一起省略。

问：预览里的像素尺寸准吗？ 答：预览是用同一份 CSS 渲染的真实网格，但预览区较窄，px 轨道只能看大致效果，贴进自己的布局才算准。

问：输出哪些对齐属性？ 答：justify-items、align-items 与 justify-content。justify-items 支持 stretch/start/center/end；align-items 多一个 baseline；justify-content 多了 space-between/space-around/space-evenly，设为 normal 时省略该行。