这个工具是什么
CSS Grid Generator 生成等分的二维网格。列数和行数均限制在 1～12 的整数范围，预览元素数等于列数乘行数，最多创建 144 个 Item。
如何使用
- 输入 Columns 与 Rows，均为 1～12 的整数。
- 调整 Column Gap 与 Row Gap。
- 查看实时生成的网格和编号元素。
- 复制 CSS 后，应用到项目中的网格容器。
使用示例
- 3 columns × 2 rows 会显示 6 个 Item。
- 12 columns × 12 rows 达到本页 144 个 Item 的上限。
- 分别设置 24px 列间距和 12px 行间距，可比较两个方向的留白。
.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(2, 1fr);
gap: 16px;
}原理与 CSS 说明
repeat(n, 1fr) 创建 n 条等分轨道，1fr 分配容器可用空间的一份。column-gap 和 row-gap 分别设置列与行之间的间距；二者相同时可使用 gap 简写。
常见用途
- 构建卡片列表与图片墙。
- 规划仪表盘等分布局。
- 学习 repeat()、fr 与 gap 的作用。
隐私说明
所有输入、计算、CSS 生成和预览都在当前浏览器中完成，不会上传用户内容，不使用后台、数据库、在线 API 或第三方 CDN，也不会自动保存您的输入。
FAQ
CSS Grid 和 Flexbox 有什么区别？
Grid 适合同时控制行和列的二维布局；Flexbox 主要围绕一个主轴分配元素。
1fr 是什么意思？
fr 表示剩余可用空间的份额。所有轨道均为 1fr 时，通常按等份分配空间。
repeat(3, 1fr) 是什么意思？
它等价于 1fr 1fr 1fr，表示三条等分轨道。
gap 和 margin 有什么区别？
gap 控制网格轨道之间的间隔，不在容器外围额外添加空隙；margin 是元素自身的外边距。
为什么行列数最多是 12？
限制每个方向最多 12，可确保预览最多创建 144 个元素，避免巨大输入拖慢页面。