CSS Grid 可视化生成器
可视化生成 CSS grid 二维布局：完整支持容器属性（display、
grid-template-columns、grid-template-rows、gap、
justify-items、align-items、justify-content、
align-content、grid-auto-flow）与单项属性
（grid-column 跨列、grid-row 跨行、justify-self、
align-self）。支持 fr / px / % /
auto 四种轨道类型动态增删，点击预览中的项即可独立编辑跨列跨行，实时预览布局，
一键复制 CSS 代码。内置三列等宽、圣杯、侧栏+主内容、卡片网格、Header-Main-Footer、杂志布局、
垂直堆叠、水平排列 8 组预设。适用于页面主布局、卡片墙、仪表盘、杂志式排版等场景。所有处理在浏览器本地完成。
容器属性（.container）
未定义行轨道，由内容自动撑开
选中项属性（.item · 项 1）
.container {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 12px;
}
.item {
/* 默认值，无需显式声明 */
}当前共 6 个 grid 项，3 列 / 0 行轨道， 列间距 12px，行间距 12px。 已选中 项 1，可在右侧编辑其单独属性。
常见问题
CSS Grid 的核心概念是什么？与 Flexbox 有什么区别？
CSS Grid 是 CSS 的二维布局模型，可同时控制行与列两个方向上的元素排列。
核心概念：轨道（track）是 grid 容器中行或列的定义，由
grid-template-columns（列轨道）和 grid-template-rows（行轨道）
声明；单元格（cell）是行轨道与列轨道的交叉区域；网格线（grid line）
是轨道之间的分隔线，编号从 1 开始，可用 grid-column: 1 / 3 指定起止线。
与 Flexbox 的核心区别：Flexbox 是一维布局，一次只能控制一个方向
（横向或纵向），适合组件内排列；Grid 是二维布局，可同时控制行列，适合页面主布局、
卡片墙、仪表盘等需要行列对齐的场景。两者并非互斥——页面主布局用 Grid，组件内部用 Flexbox，
是现代前端布局的黄金组合。
fr 单位是什么？与 px、% 有什么区别？
fr（fractional unit，分数单位）是 Grid 特有的弹性长度单位，
表示按比例分配容器的剩余空间。
与 px 的区别：200px 是固定宽度，不随容器尺寸变化；
1fr 是弹性宽度，容器变大则变宽，容器变小则变窄。
与 % 的区别：% 基于容器总尺寸计算，
50% 永远是容器一半；fr 基于容器剩余空间计算，
1fr 1fr 平分剩余空间，但若同时有 200px 1fr，则先扣除 200px 再平分剩余。
常见用法：1fr 1fr 1fr 三等分、1fr 2fr 1fr 中间宽两边窄、
200px 1fr 固定侧栏+自适应主内容。本工具的轨道编辑器支持 fr / px / % / auto 四种类型。
grid-template-columns 和 grid-auto-columns 有什么区别？
grid-template-columns：显式声明网格的列轨道，定义网格的固定结构。
例如 grid-template-columns: 1fr 1fr 1fr 明确创建 3 列网格。
grid-auto-columns：定义隐式列轨道的尺寸，即当项的数量超出
显式定义的网格时，自动生成的列的尺寸。例如网格只定义了 3 列但有 5 个项，第 4、5 个项会进入隐式列，
其尺寸由 grid-auto-columns 决定（默认 auto，按内容撑开）。
类似地，grid-template-rows 与 grid-auto-rows 也是显式与隐式的关系。
本工具暂未开放 grid-auto-columns / grid-auto-rows 编辑，
隐式轨道尺寸默认为 auto，由内容撑开。
grid-auto-flow 的 row、column、dense 分别是什么含义？
grid-auto-flow 控制项在网格中的自动排列方向与策略：
row（默认）：按行优先排列，先填满第一行再换到第二行。
column：按列优先排列，先填满第一列再换到第二列。
row dense / column dense：在 row/column 基础上启用
密集填充算法——当某个项因为跨列/跨行占用空间时，后续较小的项会回头填补前面的空隙。
dense 策略会让网格更紧凑，但可能打乱 DOM 顺序导致视觉顺序与可访问性顺序不一致，
对屏幕阅读器用户体验不友好。本工具在容器属性面板提供 4 种 auto-flow 模式切换。
justify-items / align-items 与 justify-content / align-content 有什么区别？
这是 Grid 中最容易混淆的两组属性，核心区别是作用对象：
justify-items / align-items：控制项在单元格内的对齐方式。
justify-items: center 让所有项在单元格内水平居中，
align-items: center 让所有项在单元格内垂直居中。
justify-content / align-content：控制整个网格在容器内的分布方式，
仅当网格总尺寸小于容器尺寸时生效。例如 grid-template-columns: 100px 100px 总宽 200px，
而容器宽 400px，justify-content: center 让 200px 网格在 400px 容器内水平居中。
记忆口诀：items 管单元格内项的位置，content 管整个网格在容器内的位置。
本工具同时提供这两组属性的完整选项。
grid-column: span 2 是什么意思？如何让某个项跨多列？
grid-column: span 2 表示该项跨越 2 个列轨道。这是 grid 项布局的核心能力之一。
两种语法：
1. span N：跨越 N 个轨道，从自动分配的起始位置开始。最常用，无需关心具体网格线编号。
2. start / end：指定起止网格线编号，如 grid-column: 1 / 3 表示从第 1 条线
到第 3 条线，跨越 2 个轨道。
类似地，grid-row: span 2 表示跨越 2 个行轨道。
本工具的项编辑面板提供 colSpan / rowSpan 滑块（1-6），实时生成 span N 语法。
常见用法：杂志布局中头图跨 2 列、仪表盘中图表跨 2 行、卡片墙中大卡片跨 2x2。
gap 属性在 Grid 中如何工作？row-gap 和 column-gap 可以不同吗？
gap 在 Grid 中定义轨道之间的间距，是 row-gap 和
column-gap 的简写。
单值语法：gap: 16px 等价于 row-gap: 16px; column-gap: 16px，
行列间距相同。
双值语法：gap: 16px 8px 等价于 row-gap: 16px; column-gap: 8px，
第一个值是行间距，第二个值是列间距，可以不同。
本工具提供行列间距独立调节滑块（0-48px），生成的代码会根据是否相等自动选择单值或双值简写：
行列相等时输出 gap: 12px，不等时输出 gap: 16px 8px，保持代码简洁。
gap 仅作用于轨道之间，不影响容器边缘——这与 margin 不同，是 Grid 布局推荐用 gap 替代 margin 的原因。
数据会上传到服务器吗？
不会。本工具完全在浏览器内运行，所有轨道编辑、属性调节与 CSS 生成由 JavaScript 在你本地执行， 不会发送任何配置或代码到服务器。全程零网络请求，可离线使用。