CSS Grid 生成器
以可视化方式设计 CSS Grid 布局并复制 CSS 代码
单元格按阅读顺序编号；拖动滑块时间距会实时更新。
启用命名区域后，列/行滑块将被预设的区域布局替代。
使用方法
- 设置网格尺寸 —— 拖动列数和行数滑块，各可在 1 到 12 条轨道之间选择，带编号的预览单元格会即时更新。
- 调整间距 —— 使用列间距（column-gap）和行间距（row-gap）滑块控制轨道之间的空隙，无需编写 margin 规则。
- 启用命名区域（可选） —— 打开命名区域开关并选择预设布局 —— 圣杯布局、侧边栏或卡片 —— 即可看到以文本示意图绘制的区域网格。
- 复制 CSS —— 复制生成的
.container代码块（启用命名区域时还会包含每个区域的.区域名规则），粘贴到你的样式表中。
功能特性
- 完整的轨道控制 —— 1–12 列与行，列间距和行间距独立调节，滑块与数字输入框双向同步。
- 实时预览 —— 每次修改都会立即在带编号、彩色区分的演示网格中渲染。
- 命名区域预设 —— 一键切换圣杯布局、侧边栏和卡片布局，输出可读的 grid-template-areas 示意图及对应的 grid-area 规则。
- 简洁的输出 —— 零间距会被省略，轨道数量使用 repeat() 简写，只复制真正有用的内容。
- 100% 客户端运行 —— 一切都在你的浏览器中完成，数据不会离开你的设备。
使用场景
- 页面骨架： 用圣杯预设快速搭建 header/sidebar/main/footer 结构，再在自己的代码中把 fr 轨道换成固定的侧边宽度。
- 卡片画廊： 为响应式产品网格调好列数和间距，在编写媒体查询之前先验证换行效果。
- 学习 CSS Grid： 在普通轨道和命名区域之间切换，直观理解 grid-template-columns、grid-template-rows 和 grid-template-areas 的协作方式。
相关工具
- CSS Flexbox 生成器 —— 以可视化方式设计一维 Flexbox 布局并实时预览。
- CSS 盒阴影生成器 —— 可视化设计多层盒阴影并实时预览。
- CSS 渐变生成器 —— 为布局构建自定义 CSS 渐变。
常见问题
CSS Grid 和 Flexbox 有什么区别？
Flexbox 沿单轴（行或列）排列项目，非常适合导航栏等一维布局。CSS Grid 则可以同时定义行和列，在二维方向上对齐项目，因此更适合整页布局、卡片画廊等需要同时在水平和垂直方向对齐的场景。
repeat(3, 1fr) 是什么意思？
这是定义三个等宽列的简写，每列占据可用空间的一个等分。fr 单位按比例分配剩余空间，因此 repeat(3, 1fr) 等同于 1fr 1fr 1fr —— 三条可随容器一起伸缩的等宽轨道。
什么时候应该使用 grid-template-areas？
当布局包含 header、sidebar、main、footer 等可识别的区域时，命名区域非常好用。你无需用行号定位元素，而是在 grid-template-areas 中用文本“示意图”画出布局，再给每个元素指定 grid-area 名称。以后调整布局只需修改示意图，而不用到处找定位规则。
column-gap 和 row-gap 有什么区别？
column-gap 设置网格列之间的间距（垂直方向的沟槽），row-gap 设置行之间的间距（水平方向的沟槽）。也可以用 gap 简写同时设置两者，但分开的属性可以独立控制 —— 例如列间距紧凑而行间距宽松。
生成的 CSS 可以直接用于生产环境吗？
可以。输出使用所有现代浏览器都支持的标准网格属性，并为零间距等默认值做了省略，保持代码整洁。粘贴到你的样式表后，可按需调整轨道尺寸（例如把 1fr 换成固定像素值）。