CSS Grid 生成器会输出什么？

它会生成一条带 display: grid、grid-template-columns、grid-template-rows 和 gap 的容器规则，外加你创建的每个合并区一条 grid-column / grid-row 规则。你把整个代码块复制进你的样式表。

我的轨道什么时候会折叠为 repeat()？

三条或更多相同、相邻的轨道会折叠为 repeat(n, value)。连续一两条会照原样写出，因为 repeat() 只有从三条轨道起才能缩短输出。混合序列会交错排列字面量轨道和 repeat() 组。

我如何合并单元格以跨越多列或多行？

在预览中点击一个单元格，然后点击第二个单元格。本工具会选中它们之间的矩形，并写出带正确起始线和跨度的 grid-column 和 grid-row。再次点击一个合并区块即可把它拆回单个单元格。

轨道尺寸可以用 minmax()、auto 和百分比吗？

可以。每条轨道都接受 fr 值、像素长度、百分比、auto 或 minmax(min, max)。纯数字会被当作 fr，minmax() 的间距会被归一化，让复制出的 CSS 保持一致。

为什么生成的规则使用 :nth-child() 选择器？

合并区是按位置放置的，因此本工具用 :nth-child() 按源码顺序定位网格子项。把容器选择器重命名为你自己的类，布局规则会自动跟随它。

我设计的网格会被发送到任何地方吗？

不会。CSS Grid 生成器完全在你的浏览器中构建模板和布局 CSS。你设置的列、行、间距和合并单元格绝不会离开你的设备，也不会上传到 ArrayKit。

CSS Grid 生成器

可视化地设计一个 CSS grid——设置列、行、间距和合并单元格，然后复制 grid-template CSS。一切都在你的浏览器中运行。

这款 CSS Grid 生成器完全在你的浏览器中运行。你配置的列、行、轨道尺寸、间距和合并单元格绝不会离开你的设备，也不会有任何内容上传到 ArrayKit。

打开 CSS 格式化工具

关于 CSS Grid 生成器

这款 CSS Grid 生成器让你凭肉眼构建一套网格布局，并复制它生成的精确 CSS。选择列数和行数，用 fr 单位、像素、百分比、auto 或 minmax() 为每条轨道设定尺寸，并设置间距。实时预览会展示网格；点击两个单元格即可将它们合并为一个跨区，本工具会为你写出对应的 grid-column 和 grid-row 规则。连续三条或更多相同的轨道会折叠为 repeat()，让输出保持整洁，你还可以重命名选择器以匹配你自己的类。它专为布局卡片、仪表盘和页面骨架、且希望获得正确 grid-template CSS 而不必手工数行的前端开发者而设计。编辑器完全在你的浏览器中运行，因此你输入的任何内容都不会被上传。

功能特性

设置列数和行数，并独立设定每条轨道的尺寸
用 fr、px、%、auto 和 minmax() 预设逐轨道设定尺寸
实时预览网格，精确映射你的模板和间距
点击两个单元格将它们合并为一个跨区
连续相同的轨道会自动折叠为 repeat()
在需要不同时分开设置 row-gap 和 column-gap
自定义选择器，让规则匹配你自己的类名
复制干净的 grid-template CSS 以及 grid-column / grid-row 布局

如何使用 CSS Grid 生成器

选择你的布局需要多少列和多少行
用 fr、px、%、auto 或 minmax() 设定每条轨道的尺寸
设置间距，如需不同则设置列间距
在预览中点击两个单元格以合并一个跨区
将生成的 CSS 复制进你的样式表

示例

输入

columns: 200px 1fr 1fr 1fr
rows: auto
gap: 20
merge: cols 2-4

输出

.grid {
  display: grid;
  grid-template-columns: 200px repeat(3, 1fr);
  grid-template-rows: auto;
  gap: 20px;
}

.grid > :nth-child(1) {
  grid-column: 2 / span 3;
  grid-row: 1;
}

三条相等的列折叠为 repeat(3, 1fr)，合并的单元格跨越三条轨道。

常见错误与故障排除

布局使用的列比我的轨道列表定义的更多。 — 每个隐式列都会变成一条 auto 轨道。请为你想设定尺寸的每一列添加显式轨道，或在你自己的 CSS 中为溢出部分设置 grid-auto-columns。
一个合并区与另一个重叠，单元格消失了。 — 合并区不能重叠。请先点击已有的区块将其拆开，再为新的跨区选择两个单元格，让这些矩形彼此分开。
轨道看起来一样，但 repeat() 没有出现。 — 只有连续三条或更多相同、相邻的轨道才会折叠为 repeat()。像 1 这样的纯数字会被读作 1fr，因此 1fr 和 1 这样的混合单位在归一化后仍会匹配。
子项布局落到了错误的项上。 — 布局通过 :nth-child() 按源码顺序定位网格子项。请调整你的标记顺序，或修改 nth-child 索引，让规则命中你想要的元素。

常见问题

CSS Grid 生成器会输出什么？: 它会生成一条带 display: grid、grid-template-columns、grid-template-rows 和 gap 的容器规则，外加你创建的每个合并区一条 grid-column / grid-row 规则。你把整个代码块复制进你的样式表。
我的轨道什么时候会折叠为 repeat()？: 三条或更多相同、相邻的轨道会折叠为 repeat(n, value)。连续一两条会照原样写出，因为 repeat() 只有从三条轨道起才能缩短输出。混合序列会交错排列字面量轨道和 repeat() 组。
我如何合并单元格以跨越多列或多行？: 在预览中点击一个单元格，然后点击第二个单元格。本工具会选中它们之间的矩形，并写出带正确起始线和跨度的 grid-column 和 grid-row。再次点击一个合并区块即可把它拆回单个单元格。
轨道尺寸可以用 minmax()、auto 和百分比吗？: 可以。每条轨道都接受 fr 值、像素长度、百分比、auto 或 minmax(min, max)。纯数字会被当作 fr，minmax() 的间距会被归一化，让复制出的 CSS 保持一致。
为什么生成的规则使用 :nth-child() 选择器？: 合并区是按位置放置的，因此本工具用 :nth-child() 按源码顺序定位网格子项。把容器选择器重命名为你自己的类，布局规则会自动跟随它。
我设计的网格会被发送到任何地方吗？: 不会。CSS Grid 生成器完全在你的浏览器中构建模板和布局 CSS。你设置的列、行、间距和合并单元格绝不会离开你的设备，也不会上传到 ArrayKit。