CSS Grid 生成
可视化配置并生成 CSS Grid 代码：列数行数、fr/px/auto/minmax/repeat 轨道、gap 与对齐、grid-template-areas 字符画、auto-fit 自适应，并给出可直接预览的示例 HTML。
浏览器本地运行所有计算都在你的浏览器里完成，数据不会离开本机。
预设
行列轨道
用 repeat(auto-fit, minmax(min, 1fr)) 替换列轨道，容器变窄时自动减少列数
repeat(3, 1fr)auto间距与对齐
区域划分
每行一组空格分隔的区域名，行列数必须一致；用 . 表示空单元格。留空则不输出 grid-template-areas。
实时预览
预览用真实的 grid 声明渲染，单元格数量按轨道自动生成
生成的 CSS
.grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: auto;
gap: 16px;
justify-items: stretch;
align-items: stretch;
}示例 HTML
与上面的 CSS 配套，粘进页面即可看到布局
<div class="grid"> <div class="grid-cell">1</div> <div class="grid-cell">2</div> <div class="grid-cell">3</div> <div class="grid-cell">4</div> <div class="grid-cell">5</div> <div class="grid-cell">6</div> </div>
这个工具能做什么
- 写栅格布局时不用再手敲 grid-template-columns：调好列数、行高和间距，直接复制生成的 CSS 和配套 HTML。
- 做「卡片列表」这类响应式布局：开启 auto-fit，用 repeat(auto-fit, minmax(240px, 1fr)) 让列数随容器宽度自动增减，不用写媒体查询。
- 需要网格模板区域时，用字符画描述 header / main / aside / footer，工具会生成 grid-template-areas 和每个区域对应的 grid-area 规则。
- 教学或排查布局问题时，实时预览能直观看到 fr、px、auto、minmax、repeat 几种轨道写法的差别。
示例
输入
选择器 .grid，列轨道 repeat(3, 1fr)，行轨道 auto，行列间距都是 16px，justify-items / align-items 都是 stretch
输出
.grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: auto;
gap: 16px;
justify-items: stretch;
align-items: stretch;
}示例 HTML 里会给出 6 个占位单元格（3 列 × 2 行）；填了区域字符画后改成按区域名生成子元素。
常见问题
fr、px、auto、minmax 该怎么选？
fr 按剩余空间比例分配，适合主内容区；px 固定宽度，适合侧边栏或工具栏；auto 由内容决定，适合按钮列；minmax(200px, 1fr) 给一个下限同时允许伸展，是最常用的响应式写法。
auto-fit 和 auto-fill 有什么区别？
两者都按容器宽度决定列数，区别在容器有富余空间时：auto-fit 会把空轨道折叠掉，让现有元素拉伸填满；auto-fill 保留空轨道，元素维持最小宽度。卡片列表一般用 auto-fit，需要对齐固定列宽时用 auto-fill。
grid-template-areas 的字符画有什么要求？
每一行用空格分隔区域名，所有行的单元格数量必须一致，否则整条声明会被浏览器丢弃。用 . 表示该单元格不属于任何区域；同一个区域名在字符画里必须形成矩形，跨行或跨列都可以，但不能是 L 形。
为什么生成的 CSS 里看不到 grid-area？
只有填了区域字符画才会生成 .grid-<区域名> { grid-area: <区域名>; } 这些规则，并且需要把它们加到对应的子元素上。没填区域时用 grid 的自动放置，单元格按顺序铺进轨道即可。
gap 和 margin 能不能一起用？
可以，但没必要。gap 只作用于网格轨道之间，不会在容器边缘产生额外间距，也不需要处理首尾元素的 margin 归零，是网格布局里更省心的做法。
关键词：css gridgrid generatorgrid-template-areasgrid-template-columnsauto-fitminmaxrepeatlayoutCSS Grid 生成网格布局栅格前端布局