📐 CSS Grid生成器 — 网格布局
可视化调整行列、间距、对齐，生成CSS代码。
px
CSS Grid和Flexbox有什么区别？
Grid是二维布局（同时控制行和列），Flexbox是一维布局（只控制一个方向）。复杂网格布局用Grid，简单的横向或纵向排列用Flexbox。两者可以结合使用。
📌 工具速览
可视化设置行列数量、轨道尺寸、间距与区域命名，实时预览网格布局效果并生成 grid-template-columns、grid-area 等完整 CSS 代码，一键复制使用。
📘 使用说明
- 设置网格的行数与列数
- 调整每条轨道的尺寸与间距
- 在预览区查看网格效果
- 复制生成的CSS代码
❓ 常见问题
Q: fr 单位是什么意思？
A: fr 是 fraction 的缩写，表示可用空间的一份。grid-template-columns: 1fr 2fr 意思是两列按 1:2 分配剩余宽度，比百分比更省心，因为它会自动扣除 gap。
Q: repeat 和 minmax 怎么配合用？
A: repeat(auto-fill, minmax(200px, 1fr)) 是响应式卡片布局的经典写法：每列最小 200px，能塞几列就塞几列，剩余空间平分。不用写任何媒体查询就能自适应。
Q: grid-area 有什么用？
A: 配合 grid-template-areas 可以用命名区域来布局，代码可读性极高。比如把页面划分成 header、sidebar、main、footer 四块，直接用名字指定每个元素放哪，改布局时只需改字符串。
📅 内容更新于
·
📚 收录 2382+ 在线工具
·
🤖 适配 AI 搜索引用（豆包/DeepSeek/Kimi/文心/ChatGPT）
