CSS Grid 生成器,可视化设计网格 (行列/间距/区域),一键复制 CSS,响应式。
- 本地处理
- 分类 颜色设计
- 适合 把视觉想法转成可复用的颜色值。
点击单元格命名（如 "header"）。同名相邻格会合并为同一区域。
display: grid; grid-template-columns: 1fr 1fr 1fr; grid-template-rows: auto auto; gap: 16px;
这个工具能做什么
一个可视化 CSS Grid 网格生成器,做的是你真正在线上会用的布局： 12 列 Hero 区、三栏卡片商品墙、主区 + 侧栏的 App 外壳、经典的 圣杯布局（header / nav / main / aside / footer）。先填行数和列数、 选一个 gap 间距,再决定列宽模式：等分（1fr 1fr 1fr…）、跟随内容 （auto）、或者逐列自定义,每一列单独写一段 CSS Grid 接受的尺寸 （200px、minmax(0, 1fr)、12rem、25% 都行）。点单元格给它命名, 可以叫 header、sidebar、content,拖选一片单元格就把它们合并成同一个命名 区域（grid-template-areas 语法）。右侧预览面板使用和最终输出 CSS 完全相同的参数实时渲染,所见即所得。点复制把 display: grid; grid-template-columns: ...; grid-template-rows: ...; gap: ...; grid-template-areas: ...; 整段粘进你的样式表、Tailwind arbitrary-value 类、或者 React inline style 都能直接跑。4 个预设 可以一键起步,再按需调。100% 浏览器本地,不上传、不注册、不追踪。 给写 React / Vue / Svelte 布局的程序员、给在交付前要做响应式 原型的设计师、给想在 1 分钟内拿到正确网格而不是去 MDN 啃 20 分钟文档的独立开发者用。
工具细节
- 输入
- 文本 + 数值 + 结构化内容
- 页面会根据工具类型展示文本框、数值控件、文件选择或结构化输入。
- 输出
- 即时结果 + 复制 + 预览
- 结果区优先给出可操作结果，支持项会显示复制、下载或可视化预览。
- 隐私
- 浏览器本地处理
- 主工具逻辑未发现外部 API 调用，输入通常留在当前标签页内处理。
- 保存 / 分享
- 免账号使用
- 打开页面即可使用；刷新后是否保留结果取决于具体工具。
- 性能预算
- 首屏 JS ≤ 10 KB
- 没有声明 WASM 依赖，适合快速打开和移动端使用。
- 适用场景
- 颜色设计 · 设计师
- 分类和职业标签用于推荐相关工具、组织内链，并帮助用户快速判断是否适合当前任务。
怎么用
-
1. 输入
把内容粘贴或拖入工具面板。
-
2. 处理
点击按钮,在浏览器内本地处理,文件不上传。
-
3. 复制 / 下载
一键复制结果或下载到本地。
CSS Grid 网格生成器 适合怎么用
适合在真实界面工作中选色、查色、转色值或整理配色。
适合颜色任务
- 把视觉想法转成可复用的颜色值。
- 界面上线前检查对比度和可访问性。
- 让品牌、设计和前端实现的颜色决策对齐。
颜色检查项
- 对比度要按真实背景检查,不要只看色块。
- 有深浅主题时,两套都要单独看。
- 复制设计系统或代码库真正需要的格式。
下一步可以接着做
这些入口会把当前任务接到更完整的工具链里。
真实使用场景
用 React 搭一个圣杯布局的后台外壳
你要给管理后台做 header / nav / main / aside / footer 五块 骨架。先给单元格命名,把 header 拖着横跨 5 列合并,侧栏设 240px、主区设 1fr,然后把整段 grid-template-areas 直接粘进 布局组件。以前手数行号要花 20 分钟,现在大概 90 秒搞定,而且 命名区域在代码评审里一眼能看懂。
交付前先把响应式商品墙原型跑通
设计师想要桌面端一行 4 张卡,到平板变 2 张,到手机变 1 张。 列宽填 repeat(auto-fit, minmax(240px, 1fr))、gap 设 24px,放 几个占位单元格,拖动面板就能看到预览实时重排。复制那 3 行 CSS 交给前端,网格本身一个媒体查询都不用写。
把网格粘成 Tailwind 的 arbitrary-value 类
项目用 Tailwind,你想要 280px 侧栏加一个流式内容列,又不想 跳出工具类。自定义轨道填 280px 1fr,复制生成的 grid-template-columns 值,包成 grid-cols-[280px_1fr] 就行。 工具直接给你准确的轨道字符串,省掉在 devtools 里反复猜 fr 单位的功夫。
给新人讲清楚他的网格为啥溢出
组里新人的三卡行老是撑出容器,因为一条长商品 URL 把某一列 顶到 600px。在这里把同样的网格重搭一遍,把出问题那列从 1fr 改成 minmax(0, 1fr),让预览当场缩回正常。一个抽象的规范坑 就变成他能看见、能复制、能记住的前后对比。
常见踩坑
到处用 1fr 又奇怪某列死活不缩,长内容那列得用 minmax(0, 1fr) 而 不是 1fr,否则它的 auto 下限不肯压到内容宽度以下。
忘了 grid-template-areas 要求每个格子都命名、每个区域必须是矩形, 空白处用 "." 占位,别画出 L 形区域,不然整段模板会无声失效。
一排会换行的按钮也硬上 Grid,项目只在一个轴上排列并换行时,带 flex-wrap 的 Flexbox 比每个断点都去调网格列数省心得多。
隐私说明
所有计算都在你的浏览器里跑。你填的行数、列数、gap、轨道尺寸和区域 名都不会离开页面,不上传、不注册、不发服务器请求。开启分享链接后, 你的网格参数会编码进 URL,这样同事打开就能看到一模一样的布局,公开 发链接前留意一下,这些参数是写在地址栏里的。除此之外不留存、不追踪 任何数据。
常见问题
类似工具组合
做你这行的人, 还会一起用这些。