CSS Grid 生成器
可视化构建 CSS Grid 布局，设置列数、行数、间距和模板值，实时预览并立即输出代码。免费，基于浏览器。
使用方法
- 设置列数和行数——预览和模板输入框会自动更新。
- 调整列间距和行间距以控制单元格之间的沟槽。
- 可以用任意自定义值覆盖grid-template-columns或grid-template-rows（如
200px 1fr auto）。 - 实时预览会即时反映每次更改。
- 点击复制将生成的
.container { … }代码块复制到剪贴板。
理解生成的 CSS
生成器输出一条 .container 规则，包含五个属性：
display: grid、grid-template-columns、grid-template-rows、
column-gap 和 row-gap。粘贴到样式表后，将 .container 改为你自己的类名即可。
常见网格模式
- 等宽列 —
repeat(3, 1fr)创建三列等宽布局。 - 侧边栏布局 —
250px 1fr固定侧边栏 + 弹性主区域。 - 圣杯布局 —
200px 1fr 200px配合行定义，实现头部/底部固定。 - 响应式磁贴 —
repeat(auto-fill, minmax(180px, 1fr))在任意屏幕宽度下自动换行。
FAQ
什么是 CSS Grid？
CSS Grid 是 CSS 内置的二维布局系统，可以同时定义行和列，并将元素精确放置在网格容器中。适用于页面级布局、卡片网格、图片画廊以及任何需要水平和垂直结构的 UI。
grid-template-columns 有什么用？
grid-template-columns 定义网格的列数和各列大小。生成器默认填充 repeat(N, 1fr)——N 列等宽，每列占用可用空间的一个分数单位。你也可以自定义，例如 200px 1fr 2fr 或 auto-fill minmax(200px, 1fr)。
column-gap 和 row-gap 有什么区别？
column-gap 设置列之间的间距，row-gap 设置行之间的间距，共同控制网格内部的沟槽。也可以用简写 gap: row-gap column-gap 一次设置。
1fr 单位是什么意思？
fr 是分数单位（fractional unit），按比例分配网格容器中的剩余空间。例如 1fr 2fr 1fr 创建三列，中间列宽是其他两列的两倍。它是响应式网格布局最常用的单位。
如何不用媒体查询实现响应式网格？
使用 auto-fill 或 auto-fit 配合 minmax()：grid-template-columns: repeat(auto-fill, minmax(200px, 1fr))。这会自动创建尽可能多的列（每列至少 200px），并伸展填满剩余空间——无需媒体查询。