Griddy

Griddy 是一个跑在浏览器里的 CSS Grid 练习场。左边一排控件让你增删网格的行列、给每列每行挑单位（fr、px、%、auto）并填数值，再调列间距、行间距和 justify-items、align-items 的对齐方式；右边同步显示网格效果和一段可以直接复制的 CSS，比如 grid-template-columns: 1fr 200px 1fr。它解决的是写 Grid 时「改一个数字要刷新一次页面」的来回折腾，把调参和看结果放在同一屏。

主要功能

核心是围绕 grid-template-columns 和 grid-template-rows 的实时编辑。每个维度都能单独设数值和单位，不够就点 Add another column / Add another row 继续加。间距支持 px 和 %，对齐方式提供 stretch、center、start、end 以及 space-around、space-between、space-evenly 几种。页面下方给出完整的 .container 代码块，包含 display: grid 和当前所有设置，方便整段拿走。

适合谁

刚接触 CSS Grid、对 fr 和 auto 的实际效果没把握的人，用它比读文档直观：改一个值，网格立刻变形。已经熟悉 Grid 的开发者也可以拿它当快速试参数的草稿纸，调好再抄进项目。页面本身带教学口吻，标题就是 Learn the CSS Grid，定位偏学习而非生产工具。

费用与限制

页面没有提到账号、付费或版本信息，打开即用。它只覆盖容器层面的属性，网格内部子项的 grid-column、grid-row 定位不在编辑范围内，复杂布局还得自己手写。生成的是静态代码，没有保存和分享布局的功能。