免费 CSS 工具
CSS Grid 生成器 - 可视化生成网格布局代码
设置列、行、gap、minmax 和响应式参数，生成可复制的 CSS Grid 代码，适合卡片列表、仪表盘、图库和页面布局。
工具加载中...
快速答案
CSS Grid 生成器可以可视化创建网格布局 CSS。
它适合卡片列表、图库、工具面板、仪表盘和页面分栏布局。
适合输入
清晰输入
准备好要处理的列数、行数、gap 和 minmax 设置，避免混入不相关内容。
确认目标
先确定要复制、换算、统计或生成的结果类型，减少来回调整。
本地复核
结果适合快速处理和初步判断，重要场景仍应按业务规则复核。
生成方式
工具会把列、行、gap 和 minmax 设置组合成 display:grid 代码。
列模板控制横向布局。
gap 控制间距。
minmax 和 auto-fit 可做响应式卡片网格。
示例、假设和限制
工具结果适合快速估算、转换和整理；关键场景建议按业务规则复核。
示例
生成 repeat(auto-fit, minmax(240px, 1fr)) 的响应式卡片网格。
假设
用户需要二维网格布局，而不是简单一行或一列对齐。
限制
复杂区域命名、断点策略和内容高度仍需要项目内调试。
常见使用场景
这些中文页面面向轻量、快速、浏览器本地完成的日常任务。
卡片列表
生成响应式工具卡片。
图库
排列图片缩略图。
仪表盘
搭建面板网格。
页面布局
快速试验分栏。
常见问题
Grid 和 Flexbox 怎么选？
二维布局常用 Grid，一维对齐常用 Flexbox。
支持响应式吗？
可以用 minmax 和 auto-fit 生成响应式网格。
代码会上传吗？
不会。生成在浏览器本地完成。
能生成完整组件吗？
主要生成 CSS，需要你放入项目结构中。
推荐流程
布局生成流程
先生成 Grid，再用 Flexbox 和 clamp 微调。