可以开始使用
浏览器本地 · 无需账号 · 结果留在当前页面
试试常见 Grid 布局
.grid {
display: grid;
grid-template-columns: repeat(3, minmax(180px, 1fr));
gap: 16px;
}CSS 布局输出是起始片段。发布前请用真实内容、断点、容器尺寸和浏览器支持情况测试。
CSS Grid 生成器可以可视化创建网格布局 CSS。
它适合卡片列表、图库、工具面板、仪表盘和页面分栏布局。
清晰输入
准备好要处理的列数、行数、gap 和 minmax 设置，避免混入不相关内容。
确认输出用途
先确认结果要用于发布、调试、估算、整理还是交付，再选择合适参数。
复核关键边界
结果适合快速处理和初步判断，重要场景仍应按目标平台、团队规则或业务口径复核。
示例
生成 repeat(auto-fit, minmax(240px, 1fr)) 的响应式卡片网格。
假设
用户需要二维网格布局，而不是简单一行或一列对齐。
限制
复杂区域命名、断点策略和内容高度仍需要项目内调试。
先确定内容数量
固定三列、自动填充和自适应最小宽度适合不同列表，先看内容是否会增减。
设置合理最小宽度
minmax 里的最小值太小会挤压卡片，太大则会过早掉到单列。
检查空状态和长标题
真实列表里会有空结果、长标题和按钮，生成代码后要用真实内容验证布局。
适合卡片列表和工具库
工具卡片、文章列表、价格摘要和图片网格都可以先用 Grid 建立稳定列布局。
auto-fit 更适合未知数量
当卡片数量和屏幕宽度不固定时，auto-fit/minmax 往往比固定列数更耐用。
真实内容决定最终效果
长标题、按钮、标签和空状态会影响卡片高度，生成代码后要用真实数据验证。
卡片列表
生成响应式工具卡片。
图库
排列图片缩略图。
仪表盘
搭建面板网格。
页面布局
快速试验分栏。
Grid 和 Flexbox 怎么选？
二维布局常用 Grid，一维对齐常用 Flexbox。
支持响应式吗？
可以用 minmax 和 auto-fit 生成响应式网格。
代码会上传吗？
不会。生成在浏览器本地完成。
能生成完整组件吗？
主要生成 CSS，需要你放入项目结构中。
CSS Grid 和 Flexbox 应该怎么选？
Grid 更适合同时控制行列的二维布局，Flexbox 更适合一行或一列的一维对齐。
auto-fit 和 auto-fill 有什么区别？
两者都能自动生成列，但空余轨道处理不同。实际选择要看你希望空列保留空间还是让已有列扩展。
Grid 和 Flexbox 怎么选？
二维布局常用 Grid，一维对齐常用 Flexbox。
支持响应式吗？
可以用 minmax 和 auto-fit 生成响应式网格。
代码会上传吗？
不会。生成在浏览器本地完成。
能生成完整组件吗？
主要生成 CSS，需要你放入项目结构中。
CSS Grid 和 Flexbox 应该怎么选？
Grid 更适合同时控制行列的二维布局，Flexbox 更适合一行或一列的一维对齐。
auto-fit 和 auto-fill 有什么区别？
两者都能自动生成列，但空余轨道处理不同。实际选择要看你希望空列保留空间还是让已有列扩展。
推荐流程
布局生成流程
先生成 Grid，再用 Flexbox 和 clamp 微调。