一个简单好上手的 CSS Grid 布局学习游戏：29 关胡萝卜花园 Grid Garden 完整上手指南
【免费下载链接】gridgardenA game for learning CSS grid layout 🥕项目地址: https://gitcode.com/gh_mirrors/gr/gridgarden
写 CSS Grid 布局时，你是不是也遇到过同样的坎：文档把每个属性都讲透了，合上以后，grid-column-start 到底对应第几条线，脑子里还是空的。Grid Garden 把这件事变成了一款打开就能玩的游戏——在 5x5 的胡萝卜田里写 CSS 代码浇水，玩通关 29 个关卡，网格布局的属性就顺带记住了。
它解决了什么问题：把"背了就忘"变成"用过就记得"
传统学 CSS 布局的方式——看文档、看视频、敲示例——都有一个共同短板：缺少即时反馈。你写错一个 grid-template-columns，页面布局崩了，但你说不清为什么。
Grid Garden 的做法很直接：每一关只抛出一个具体目标，你的代码立刻决定水是浇在胡萝卜上，还是浇在杂草上。对就过下一关，错就重写。用做代替背，是它最核心的价值。
第一次打开会看到什么：左边代码框，右边一块胡萝卜田 🥕
界面分左右两块：右边是一块 5x5 的花园，随机分布着胡萝卜、杂草和空土地；左边是代码编辑器，已经预填好#garden的基础网格样式。
第一关的教学就是grid-column-start：胡萝卜从第 3 条竖线开始，你只需补一行代码，让水覆盖胡萝卜所在区域，又不能浪费一滴水在土地上，写grid-column-start: 3;即可。点"Next"按钮，水会实时铺到田里——命中就进下一关，没命中就重新写。
29 个关卡的推进顺序由浅入深：先是 grid-column-start / grid-column-end，再到 grid-column、grid-row 系列，然后是 grid-area、order，最后是 grid-template-columns、grid-template-rows 和简写语法 grid-template。进度存在浏览器 localStorage 里，下次打开直接接着玩。
能帮你做成什么事：三个最有体感的学习场景
分清"第几条线"和"第几个格子"
Grid 属性里最容易混的就是线号和格子号的差别，而游戏里数字写错一位，水就会浇到杂草上，这种错误反馈比读十遍文档都深刻。第二关的场景是"角落里长了杂草，用grid-column-start施药"——同一个属性换个情境，逼着你去数线而不是背答案。
掌握跨格与定尺寸的 grid-area
前面的单属性关卡练手感，到了 grid-area 关卡，要求是精确裁出一块指定位置和尺寸的矩形，行、列的起止位置要同时想清楚。这正好对应真实项目里"给侧边栏、给卡片划一块固定区域"这种最头疼的活。
建立和 Flexbox 的对比直觉
玩 grid-template-columns 系列关卡时，你要直接改写网格本身的列定义。这个过程会让你直观感受到：Flexbox 解决"一行内排元素"，Grid 解决"整块棋盘式的二维控制"。如果你一直用 Flexbox、总觉得差口气，这套对比最值钱。
谁用得上，能得到什么
- Web 开发新手：10~15 分钟就能过完基础属性，拿到第一次"二维布局"的直观感受
- 用惯 Flexbox 的开发者：补齐向 Grid 过渡的短板，尤其是 grid-template 和区域命名
- 带新人、做培训的技术负责人：免费、纯浏览器、零配置、无需账号，直接把链接扔给对方就能上手
它内置了 40 多种语言的关卡文案（含简体中文），翻译文本集中在 js/messages.js 和 js/levels.js，想贡献翻译改完提 PR 即可。核心逻辑就四个文件：js/levels.js（关卡与题目）、js/docs.js（属性速查词典）、js/messages.js（多语言文案）、js/game.js（游戏流程与进度保存）。
想本地跑一份也没门槛：git clone https://gitcode.com/gh_mirrors/gr/gridgarden，打开 index.html 就能玩，无需构建。
通关这套 Grid 关卡之后，如果你还想把 Flexbox 也玩一遍，同作者的 Flexbox Froggy 是同一路线的姊妹游戏。
【免费下载链接】gridgardenA game for learning CSS grid layout 🥕项目地址: https://gitcode.com/gh_mirrors/gr/gridgarden
创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
