🔲
CSS Grid 生成器
设置行列数与间距,可视化生成 CSS Grid 网格布局代码。
本地处理 · 不上传
加载工具中…
相关：CSS Grid · 网格布局 · grid生成 · 栅格 · 布局代码
CSS Grid 生成器可视化配置行列数量、尺寸与间距，支持命名区域布局，实时预览并输出 grid 相关的 CSS 代码。
使用步骤
- 设置行列数量与各自尺寸
- 调整间距
- 按需划分命名区域
- 复制生成的 CSS
使用场景
- 搭建页面的整体骨架布局
- 实现响应式的卡片网格
- 制作经典的头部侧边栏内容区布局
- 设计仪表盘的分区排布
小贴士
- `fr` 是 Grid 独有的单位，表示剩余空间的份数。`1fr 2fr` 就是按一比二分配剩余空间，比百分比更省心，因为它自动扣除了间距。
- `repeat(auto-fill, minmax(200px, 1fr))` 一行就能实现响应式卡片网格，无需任何媒体查询。
- grid-template-areas 用字符串画出布局形状，可读性极高，改版式只要改这几行字符画。
常见问题
fr 和百分比有什么区别？
百分比基于容器总宽度计算，加上 gap 后容易溢出；fr 分配的是扣除间距后的剩余空间，因此 `1fr 1fr` 配合 gap 永远刚好填满，不会溢出。
auto-fill 和 auto-fit 有什么不同？
列数不足以填满时，auto-fill 保留空列，auto-fit 则把空列折叠、让现有项目拉伸占满。想让少量卡片撑满整行就用 auto-fit。
Grid 兼容性如何？
现代浏览器全面支持，包括子网格等较新特性也已普及。除非必须兼容 IE，否则可以放心使用。
CSS Grid 生成器是免费的吗？
是。本站所有工具完全免费，无需注册登录、无广告干扰，打开即用。
使用CSS Grid 生成器，我的数据安全吗？
安全。该工具在你的浏览器本地完成处理，输入内容不会上传到服务器，隐私更有保障。