一个简单好上手的 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），仅供参考