CSS Grid 生成器

设置等宽列数、行数与间距,工具会生成 display: grid、grid-template-columns、可选的 grid-template-rows 与 gap 的 CSS 代码,快速搭建响应式网格。全部在浏览器本地完成。

网格设置 等待输入

列数需 ≥ 1;行数为 0 时不输出 grid-template-rows。

计算结果
列数—
行数—
设置参数后点击生成,CSS 代码将显示在这里。

生成的代码可直接粘贴使用;结果仅供参考。

计算说明
  • display: grid 启用网格布局。
  • repeat(n, 1fr) 生成 n 个等宽(或等高)轨道。
  • gap 同时设置行、列间距。
  • grid-template-rows 不写时行高由内容自动决定。
  • 网格子项可用 grid-column / grid-row 跨列跨行。