CSS Grid 生成器

生成的规则包含什么

生成器只输出一条 .container 规则，固定五条声明：display: grid、grid-template-columns、grid-template-rows、column-gap、row-gap。粘贴到样式表后，把 .container 换成你自己的类名即可。

这条规则只描述容器。子元素不需要写任何定位，浏览器会按 HTML 中的顺序把它们一个格子一个格子地放进去，放满一行再换下一行。工具里的预览也是这样画的：它总是画出“列数 × 行数”个色块。如果你在模板里写的列数和“列数”不一致，多出来的色块会进入隐式行，和真实页面里的子元素表现相同。

示例一：商品列表的四列卡片

电商首页的商品列表常常是四列等宽卡片。把列数设为 4、行数设为 3，列间距填 12px，行间距填 20px，复制得到：

.container {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(3, 1fr);
  column-gap: 12px;
  row-gap: 20px;
}

fr 的份额是先扣掉间距再分的：容器宽 1200px 时，三条列间距共 36px，每列宽 (1200 − 36) ÷ 4 = 291px。

两点要留意。第一，商品数量通常不固定，超过 12 件时，多出的商品会进入隐式行，隐式行默认是 auto 高度，不受 repeat(3, 1fr) 控制；如果只想让卡片按内容撑高，复制后删掉 grid-template-rows 这一行（在工具里清空行模板，输出仍是 repeat(N, 1fr)）。第二，1fr 行在容器没有固定高度时会按内容计算后再拉成一样高，所以某张卡片的标题多了一行，同一网格里所有行都会跟着变高。

示例二：后台管理页的侧边菜单

后台管理系统常见的结构是左侧固定宽度的菜单、右侧内容区，上方一条顶栏。先把列数设为 2、行数设为 3，再展开“自定义模板”，列模板填 200px 1fr，行模板填 56px 1fr auto，两个间距都填 0：

.container {
  display: grid;
  grid-template-columns: 200px 1fr;
  grid-template-rows: 56px 1fr auto;
  column-gap: 0;
  row-gap: 0;
}

在 1440px 宽的窗口里，菜单列 200px，内容列拿到剩下的 1240px。顺序一定是先改数量、最后填模板：改动列数会把列模板重置为 repeat(N, 1fr)，改动行数会重置行模板；只改间距时模板保留。顶栏要横跨两列，需要在顶栏元素上自己补写 grid-column: 1 / -1，工具不生成子元素的规则。

中文输入法带进来的全角空格

在中文输入法下直接打模板，很容易把两个值之间的空格打成全角空格（U+3000）。例如列模板写成 240px　1fr，工具不做校验，会原样输出：

.container {
  display: grid;
  grid-template-columns: 240px　1fr;
  grid-template-rows: repeat(1, 1fr);
  column-gap: 16px;
  row-gap: 16px;
}

肉眼几乎看不出差别，但这条声明是无效的。CSS Syntax Level 3 对空白的定义是 A newline, U+0009 CHARACTER TABULATION, or U+0020 SPACE.，U+3000 不在其中，也不能出现在标识符里，所以浏览器会丢弃整条 grid-template-columns；没有别的规则时，网格退回单列。全角数字（如 ２４０px）同样会让声明失效。工具的预览这时会停在上一个有效的模板上，因为浏览器忽略了无效值，所以预览“没变化”本身就是一个提示：检查一下空格和数字是不是半角。

限制

• 只生成容器规则。grid-column、grid-row、grid-template-areas、命名网格线和对齐属性都没有控件，需要在复制后自己补写。
• 列数 1–12、行数 1–8。填入更大的数会按 12 列或 8 行处理。
• 模板和间距输入框不校验，无效值（如 repeat(3 1fr)）也会照原样复制。
• 1fr 列的最小值是 auto，即内容的最小宽度。单元格里有很长的英文单词或网址时，这一列会被撑宽，甚至超出容器；改用 repeat(3, minmax(0, 1fr)) 可以让各列保持等宽。纯中文正文几乎可以在任意两个字之间换行，一般不会触发这个问题，中英混排的网址才是常见原因。

网格轨道的计算规则见 CSS Grid Layout Level 2。只需要沿一个方向排列时，CSS Flexbox 生成器通常更简单。