1–12
1–12
例如：1fr 1fr 1fr、200px 1fr、repeat(3,1fr)
例如：auto、100px auto、repeat(3,80px)
单元格跨度（选择一个单元格）
跨越的单元格以绿色显示。
点击单元格以选中，然后在下方设置列/行跨度。
生成的 CSS
什么是 CSS Grid？
CSS Grid Layout 是现代浏览器内置的二维布局系统。使用 display: grid 定义网格容器，然后通过 grid-template-columns 控制列，通过 grid-template-rows 控制行。分数单位（fr）按比例分配可用空间。子元素可以使用 grid-column: span N 和 grid-row: span N 跨越多列或多行。
如何使用 CSS Grid 生成器
-
使用数字输入框（每个 1–12）设置列数和行数。
-
调整 grid-template-columns 和 grid-template-rows 来控制尺寸（例如：1fr 2fr、200px auto）。
-
设置单元格之间的间距（例如：10px、1rem）。
-
点击预览中的任意单元格以选中（变为橙色）。
-
在「单元格跨度」面板中设置 「col-span」和「row-span」，然后点击「应用」。跨越的单元格变为绿色。
-
点击 CSS 或 HTML 选项卡切换输出格式，然后复制到剪贴板。
-
点击「全部重置」以使用全新的 3×3 网格重新开始。