CSS Grid 生成器

CSS Grid 是现代 CSS 里的二维布局系统：你一次性描述行和列，再让浏览器把元素放进这个结构。这个生成器提供轨道和间距滑块、实时预览、三套命名区域预设，以及可以直接复制进样式表的干净 CSS。它瞄准的是网格布局里最常用的那 80%——等宽列、均匀间距和一个简单的区域示意图——让你几秒钟就能起一个布局，而不必手敲模板字符串。

使用方法

1. 拖动列数和行数滑块（各 1–12），或在旁边输入框里键入数字。每次改动预览都会重绘。
2. 分别设置 column-gap 和 row-gap，范围 0 到 48 像素。它们是两个独立属性，所以你可以用紧凑的列间距配宽松的行间距。
3. 可选地勾选命名区域并选择预设——圣杯布局、侧边栏或卡片。滑块会锁定到预设的尺寸。
4. 复制 .container 代码块。如果启用了命名区域，还要一并复制生成器追加的 .区域名 规则。

实操示例

示例 A —— 四列两行的卡片网格。 列数 4、行数 2、列间距 16、行间距 12，生成：

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

示例 B —— 圣杯布局预设。 勾选命名区域并选择圣杯布局后，轨道数量切换为 3 × 3，并追加一张示意图：

grid-template-areas:
  "header header header"
  "nav main aside"
  "footer footer footer";

随后生成器会为每个区域输出一条规则，例如 .header { grid-area: header; }。任何带上该类的直接子元素都会被自动放置，main 横跨中间那一个单元格，而 header 和 footer 跨越全部三列。

读懂生成的 CSS

三条声明承载了大部分含义。display: grid 把元素变成网格容器。grid-template-columns 和 grid-template-rows 定义轨道；repeat(n, 1fr) 表示 n 份等分的剩余空间。fr 单位并不是简单意义上的“容器的 n 分之一”——间距会先被扣掉，剩下的才拿来均分。对一个 1200px 宽、三列、列间距 16px 的容器，间距占掉 32px，每条 1fr 解析为 (1200 − 32) ÷ 3 ≈ 389.3px。grid-template-areas 是一张可视化地图：重复出现的名字会把单元格合并成一个区域，句点则让单元格留空。

轨道 vs 命名区域：该如何选择

情况	更合适的选择	原因
整齐的卡片画廊，数量未知	普通轨道	只需决定轨道数量，加媒体查询后元素会自然换行
带 header/sidebar/footer 的页面骨架	命名区域	示意图本身就是布局文档，重排后依然可读
一个特性块横跨两列两行	命名区域	重复名字可合并单元格，单靠等分 1fr 轨道很难表达
需要混合固定宽度和弹性宽度	先用轨道，再手改	生成器只输出 1fr；逐条替换轨道即可

常见错误

• 以为间距会自动压缩轨道。 会的，但前提是网格元素可以收缩。卡片上的 min-width 可能把某条轨道撑得比 1fr 还宽，在 10–12 列时造成横向溢出；这时应换成 minmax(0, 1fr)。
• 给孙级元素加样式。 网格放置只作用于直接子元素。容器和卡片之间多包一层 <div> 会破坏预期布局。
• 改了示意图里的区域名却忘了改类名。 .header 规则和 "header header header" 字符串必须完全一致；一个拼写错误会静默地让元素无法放置。
• 忘了命名区域只改变视觉顺序、不移动 HTML。 视觉顺序和源码顺序会分离，这会影响键盘 Tab 顺序和屏幕阅读器——如果视觉顺序改变了含义，请检查无障碍表现。
• 以为预览是响应式的。 演示网格是固定的；真正的响应式仍需 @media 规则或 auto-fit/minmax，这些生成器都不产出。

准确性与局限

输出使用的是标准且广泛支持的网格属性，并且会省略零间距，让 CSS 保持精简。你拿不到的东西包括：auto-fit、auto-fill、minmax()、subgrid、逐元素的 span 控制，以及自动生成的媒体查询。轨道数量永远是等分，间距上限 48px。请把结果当作一个正确、可读的起点，而不是一版完成的响应式布局。

你还需要补充的响应式行为

生成器输出的是固定轨道数量，不是容器查询。一个四列桌面网格在 375px 宽度下会把卡片挤得很难受，除非你自己加断点。常见做法是把生成的代码块当作桌面基准，在其下方逐级叠加更简单的网格：

@media (max-width: 900px) {
  .container { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .container { grid-template-columns: 1fr; }
}

另一种不需要媒体查询的方案是 grid-template-columns: repeat(auto-fit, minmax(220px, 1fr))，它会按容器宽度尽可能放下更多最小 220px 的列，其余自动换行。它对未知元素数量更有韧性，但本工具不会生成。由 CMS 驱动的卡片画廊优先用 auto-fit 写法；带命名区域的页面骨架则保留显式轨道，再加一个把所有区域堆成单列的断点。

相关工具

• CSS Flexbox 生成器 —— 设计一维 Flexbox 布局并实时预览。
• CSS 盒阴影生成器 —— 设计多层盒阴影并实时预览。
• CSS 渐变生成器 —— 为布局构建自定义 CSS 渐变。