欢迎使用 Grid 全功能调试器！CSS Grid 就像是一个“货架系统”，你需要决定货架怎么摆，以及货上的东西怎么放。
第一步：调节“护城河” —— Gap
对应操作：滑动顶部的 Gap 拉杆。
Gap（间距） 就像是格子之间的护城河。
它是格子与格子之间的距离，但不会在容器的最外圈产生边距。
在我们的工具中，数值每增加 1，代表增加了 4px。它是让你的页面“呼吸感”十足的秘诀。
第二步：控制“货架整体” —— Content 对齐
对应操作：点击蓝色的 Content 按钮组。
justify-content (水平位移)：
- start / center / end：让整块网格靠左、居中、靠右。
- between：把空余的地方塞在格子中间，让第一列和最后一列贴边。
- evenly：最强迫症的选择，让每个格子前后的间距都一模一样。
align-content (垂直位移)：
决定整块网格是靠顶、居中、还是靠底。
第三步：控制“货架里的货” —— Items 对齐
对应操作：点击粉色的 Items 按钮组。观察 01-06 那些白色小方块的变化。
这是新手最容易混淆的地方。Items 属性控制的是每一个小方块在它自己的“领地”里怎么待着。
justify-items (格子内的水平姿态)：
- start / center / end：小方块在格子里靠左、居中、靠右。你会发现一旦选了这三个，方块就缩成一小团了。
- stretch (默认值)：方块像橡胶一样左右拉满，填满格子的宽度。
align-items (格子内的垂直姿态)：
- start / center / end：小方块在格子里靠顶、居中、靠底。
- stretch：方块上下拉满，填满格子的高度。 想象你的网格是一个整体的“包裹”。如果包裹比外面的大框（预览区）要小，你就需要决定这个包裹放哪。
💡 新手必看：两个决定性的区别
| 属性组 | 你在动什么？ | 视觉感受 |
|---|---|---|
| Content | 动的是整体 | 整个网格阵列在容器里整体挪位 |
| Items | 动的是每个个体 | 小方块在各自的底色格子里变大、变小、变位置 |
正在加载交互编辑器...
最后编辑于 2026-01-07 14:20:04