CSS Grid 演练场
开发
可直接编辑 grid-template-columns 与 rows，或从常用预设（3 列、侧边栏、holy grail、auto-fit 卡片）中选取。用标签调整 gap、justify-items、align-items；改变预览中项目数量。预览实时反映，CSS 可直接粘贴。与 Flexbox 演练场一起覆盖 CSS 布局的两大支柱。
—
模板
点击预设可载入到列 / 行字段。
justify-items
align-items
预览
1
2
3
4
5
6
CSS
display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: auto; gap: 12px; justify-items: stretch; align-items: stretch;
使用方法
- 选择模板预设，或自定义 grid-template 值。
- 设置 gap 与预览的项目数。
- 用标签调整 justify-items / align-items。
- 把 CSS 复制到项目。
常见问题
- fr 是什么？
- 剩余可用空间的一份。'repeat(3, 1fr)' 把容器分为等宽三列。可混合固定尺寸：'200px 1fr' 表示 200px 侧栏 + 弹性主区。
- auto-fit 与 auto-fill 怎么选？
- 两者都创建尽可能多的轨道。auto-fit 折叠空轨道；auto-fill 保留。响应式卡片网格通常用 auto-fit。
- 为何对齐与预期不一致？
- justify-items / align-items 是单元格内内容的对齐。整个网格的对齐用 justify-content / align-content（本工具暂未支持）。
- 能命名线或区域吗？
- 真实 CSS 中可以。但演练场聚焦最常见的视觉属性。named lines / grid-template-areas 很强但在通用预览中难以展示。