CSS Grid 布局游乐场
免费线上 CSS Grid 布局游乐场与生成器。编辑栏列轨道（fr、px、auto、minmax），沿着编号格线放置子项跨栏跨列，再复制 CSS。
CSS Grid 布局游乐场
免费线上 CSS Grid 布局游乐场与生成器。编辑栏列轨道（fr、px、auto、minmax），沿着编号格线放置子项跨栏跨列，再复制 CSS。
关于 CSS Grid 布局
用画面建立栏与行
Grid 容器用 grid-template-columns 与 grid-template-rows 定义栏、行轨道。输入 1fr 2fr 120px 或 minmax(120px, 1fr) 等值，再调整 gap 与子项对齐，预览就会同步更新。想从可用版式开始时，可载入圣杯布局或卡片墙范例再修改。
轨道是空间，格线是边界
3 条栏轨道会形成 4 条有编号的栏格线，因为每条轨道两侧都需要边界。因此 grid-column: 1 / 3 是从第 1 条线开始、跨过前 2 条轨道，在第 3 条线停止。预览周围的编号圆点会让这种以线定位的方式直接可见。
放置每个子项并复制 CSS
选取子盒后，可设置它的 grid-column 与 grid-row 起止线，再用 justify-self 或 align-self 调整单个子项的对齐。每次有效变更都会同步生成可复制的 CSS。目前版本聚焦明确轨道与格线定位，因此不接受 repeat()、auto-fill、auto-fit、subgrid 或具名 grid-template-areas。
常见问题
关于这个主题的常见疑问与实用解答。
这个 CSS Grid 生成器可以做什么？
可定义栏、行轨道、调整 gap 与对齐、新增子盒、把每个子盒放到指定格线之间、实时预览版式，并复制容器与子项的 CSS。内置范例可作为常见版式的快速起点。
grid-column: 1 / 3 是什么意思？
它会让子项从第 1 条栏格线延伸到第 3 条栏格线，因此跨过两条线之间的 2 条轨道。这些数字指的是格线编号，不是要占几栏。
CSS Grid 的 fr、auto 与 minmax() 是什么？
fr 会把剩余空间分成弹性比例；auto 依内容与可用空间决定轨道大小；minmax(最小值, 最大值) 为轨道设置尺寸上下限。本编辑器也接受 120px 这类固定像素轨道。
什么时候该用 CSS Grid，而不是 Flexbox？
当行与栏需要一起构成二维版式，例如页面骨架或卡片矩阵时，适合使用 Grid。只有单行或单栏时，Flexbox 通常更简单。两者可以搭配使用，Grid 子项本身也能是 Flex 容器。
这个游乐场支持 repeat()、auto-fit、subgrid 或具名 Grid 区域吗？
目前不支持。轨道编辑器接受明确的 fr、px、auto 与 minmax() 值，让编号格线维持可预期。repeat()、auto-fill、auto-fit、subgrid 与 grid-template-areas 不在目前版本范围内。