Grid Garden

Grid Garden 是一个通过游戏学习 CSS Grid 布局的交互式网站，由 Codepip 创建。它采用视觉化的关卡设计，让玩家通过编写正确的 CSS 代码来灌溉花园中的胡萝卜，从而掌握网格容器的各项属性。

核心功能

• 28 个渐近关卡：从基础概念到复杂布局，逐步学习 grid-template-columns、grid-template-rows、grid-area、justify-items 等属性。
• 实时反馈：编写代码后立即看到花园中元素的排列变化，直观理解属性效果。
• 多语言支持：界面提供包括简体中文在内的 30 余种语言，降低学习门槛。

适用人群

• 初次接触 CSS Grid 的前端学习者。
• 需要通过练习巩固 Grid 知识的开发者。
• 喜欢游戏化学习方式、希望提升布局技能的网页设计师。

如何使用

访问 cssgridgarden.com，选择语言后直接从第 1 关开始。每个关卡左侧是 CSS 编辑区域，右侧是可视化的花园格子。根据提示编写正确的属性值后，点击“Next”进入下一关。无需注册或付费，完全免费使用。

注意事项

• 网站专注于 Grid 布局，不涵盖其他 CSS 概念。
• 部分高级 Grid 特性（如 subgrid）未包含在关卡中。