先数网格线，不要只数有颜色的格子
先读关卡浇水目标，再辨认目标区域的边界线。CSS 网格用网格线和轨道描述位置；网格线编号并不等于有颜色的格子编号。输入 CSS 前，先指出开始和结束边界，这样更容易预测规则会覆盖哪里，而不是水移动后才发现选错区域。
任务使用 span 时，应考虑需要跨多少条轨道，不要直接换算成像素距离，也不要因为两款游戏都教 CSS，就照搬 Flexbox 的对齐规则。一次修改一项，观察浇水区是否覆盖胡萝卜或本关指定目标。是否成功以当前任务为准，覆盖面积更大未必更正确。
根据浇水区的形状定位规则错误
浇水区起点不对，就检查起始网格线；起点正确却过早或过晚结束，就检查终点或跨度；沿错误方向变化，就检查用了哪个行、列属性。先描述几何错误，再修改对应部分，不必把多个本来正确的规则一起替换。
成功后，解释目标位于哪些网格线之间，规则怎样选中它们。后续关卡可能换网格或组合条件，因此理解边界比记住孤立的答案更有帮助。本中心针对实际 CSS 花园的任务，不承诺外部认证或每个版本的完整答案。编辑器操作请看游戏页。
例如，多浇了一条轨道，就标出正确的结束边界，与输入的终点或 span 比较；保留正确起点，只改末端。如果结果移到另一行，就分别检查行与列规则。覆盖正确后，再用文字描述边界和轨道。这种练习能把 CSS 与可见网格对应起来，帮助处理不能套用旧答案的新布局。
Grid Garden 技巧和策略
勾选下一局想练习的技巧。这份清单不会改变游戏或保存游戏进度。
Grid Garden 问题和答案
Grid Garden教授什么主题？
它通过花园布局谜题提供与 CSS 网格的互动练习。
我可以控制一个移动的角色吗？
不。主要交互是输入 CSS 来改变网格位置。
原始出处是什么？
Thomas Park 的 Grid Garden 提供了本评测版本中使用的 MIT 许可源代码和 CC BY 3.0 插图。
起始线是 2、结束线是 4，会覆盖四个格子吗？
不会。grid-column-start: 2 与 grid-column-end: 4 选择的是第 2 到第 4 条线之间的空间，也就是两列轨道。结束线是边界，并非多浇水的一个格子。数清线之间的间隔，或使用 span 2；先检查高亮范围，再调整行的位置。