在左侧填写 grid-template-columns / rows、间距与对齐属性，右侧蓝图网格实时预览，下方自动生成可复制的完整 CSS —— 在线练习 Grid 布局的工作台。
点选即填入列行模板、间距与对齐，可继续微调。
读取解析后的 grid-template-columns / rows 像素值，按比例绘制；fr 如何分配剩余空间一眼可见。
调好的参数可存成方案随时载入，也能生成可分享链接；结果里的数值列会自动画成对比图，并支持导出 CSV / JSON。
列行模板口径写清楚，网格才不会错位。
Grid 的列行模板、fr、minmax 与对齐属性光看教程很难记住。本页是可视化演练场：左侧改 grid-template-columns / rows、gap、对齐，右侧蓝图网格实时重绘，非法值当场标红，下方同步生成完整 CSS，复制即贴进项目，边玩边学。
① 先定列再定行：日常布局九成只需要写 grid-template-columns，行交给内容自动撑开；别一上来两维全部写死。
② 非法值看红色提示：列模板多打一个空格、minmax 少个括号都会解析失败，本页会标红输入框，修正后预览即时恢复。
③ 用子项数量试响应：把子项数量从 1 拉到 12 来回切，观察换行与挤压行为，比只盯一屏更懂 auto-fit 与 minmax 的配合。
现在只有你自己能看到这条留言（已标上「待审核」），管理员审核通过后才会展示给所有人～
还没有留言，来抢沙发吧！