适用人群
- 构建卡片列表的开发者
- 比较二维布局的设计师
Developer Layout Utility
CSS Grid布局生成器
可实时测试 columns、rows、gap、minmax、auto-fit 和对齐选项，并快速生成 CSS Grid 代码的布局生成工具。
Grid 布局生成
通过调整 columns、rows、gap 和 minmax 值快速创建卡片式 Grid 布局。
实时预览
修改设置时可立即查看 Grid 排列、间距、项目高度和对齐效果。
复制 CSS 代码
可复制生成的 grid-template、gap、align-items、justify-items 代码，或保存为 CSS 文件。
Grid 设置
设置 Grid 容器的列数、行数、间距、对齐方式和项目数量。
快速预设
一键应用常用 Grid 布局模式。
选择普通 repeat、响应式 auto-fit 或自定义模板模式。
1
3个
8
1
2个
6
2
6个
24
0px
18px
60px
0px
18px
60px
120px
220px
360px
用于 auto-fit minmax 模式。
80px
120px
220px
0px
24px
60px
0px
20px
40px
用于 custom template 模式。例如：240px 1fr 1fr，minmax(180px, 1fr) 2fr
Live Preview
Mode
repeat
Columns
3
Gap
18px / 18px
生成结果
根据当前 CSS Grid 设置生成的代码。
请调整 Grid 设置后点击生成 CSS 代码按钮。
Grid 使用方式对比
根据布局需求选择 repeat、auto-fit 或 custom template。
repeat columns
重复列
auto-fit minmax
重复列
custom template
重复列
选择适合内容的CSS Grid列布局
生成固定列数、auto-fit或自定义列布局。先比较间距与对齐，再用真实文字和图片检查生成的CSS。
使用场景
- 创建随宽度变化的卡片列表。
- 组合固定侧栏和弹性正文区域。
从输入到检查结果
- 1
选择固定列数、auto-fit或自定义列。
- 2
设置列数或卡片最小宽度。
- 3
调整行高、间距、内边距和对齐。
- 4
在不同宽度下比较预览。
- 5
生成CSS，应用容器和子项类，并测试实际内容。
自适应卡片
- 输入
- auto-fit；最小宽度220px；间距20px
- 结果
- repeat(auto-fit, minmax(220px, 1fr))
容器比最小宽度加内边距更窄时，可能需要额外规则。
侧栏与正文
- 输入
- 自定义：260px minmax(0, 1fr)
- 结果
- 一个260px列和一个占用剩余空间的列。
正文可以收缩，但固定侧栏仍需单独考虑移动端。
计算与处理原理
根据模式生成grid-template-columns，并输出行尺寸、间距、对齐、内边距和圆角。自定义列最多200字符，拒绝声明分隔符，并在可用时通过CSS.supports检查。
限制与注意事项
- 编号方块无法模拟长文本和图片固有尺寸。
- 不会自动设计断点或符合语义的阅读顺序。
- 没有专门组装grid areas和父子subgrid布局的控件。
数据处理
布局值与自定义列在本地浏览器处理。
参考资料
相关工具
- Flexbox布局练习
居中显示空状态内容。
- 玻璃拟态CSS生成器
在有纹理的背景上放置卡片。
常见问题
auto-fit一定不会横向溢出吗？
不一定。最小列宽大于容器时仍可能溢出，请同时检查内边距与真实内容。
为什么自定义输入被拒绝？
请只输入grid-template-columns的值，不要输入完整声明或样式表。
额外行使用什么高度？
固定模式生成显式行，超过这些行的子项使用设置的grid-auto-rows高度。