网格布局一眼就乱：Grid Garden 浇水闯关理清楚
网格布局的属性名比弹性布局还多，定义行列的那串数值到底在划分什么，写完页面为什么和想的不一样。这个游戏把每关做成一块菜地：用网格属性把水管铺到该浇的胡萝卜上，属性写对画面立刻变，写着写着就把行列的概念理顺了。
它解决什么问题
行列定义、区域命名、自动排列这些概念混在一起，越看越乱。
布局出问题时分不清是自己参数写错，还是容器本身就没撑开。
核心能力
| 能力 | 具体能做到什么 |
|---|---|
| 概念可视化 | 写下的行列定义直接反映在菜地画面上 |
| 逐步加码 | 从简单的列宽设置推进到跨行跨列与区域划分 |
| 属性清单 | 每关列出可用属性与取值，不必来回切文档 |
| 多语言界面 | 提供多种语言，可在页面里切换 |
| 开源可部署 | 代码公开，可自行搭建或参与改进 |
| 单关很短 | 一关只需几分钟，适合零散时间推进 |
玩完一轮，用真需求复刻一次
这类游戏的通病是容易形成关卡思维：知道用哪几个数字过关，却说不清那些数字的含义。建议每关通过后把值改一改，比如把固定像素换成比例单位，观察菜地随窗口怎么变化，这样才理解弹性单位的用处。遇到跨行跨列的关卡，先在纸上画一张网格草图再动手，比对着屏幕反复试快得多。
它只覆盖网格布局这一块，响应式切换、内容溢出、与其他布局方式的配合都不在范围内，通关不等于能应付真实页面。比较靠谱的做法是找一个用网格排版的页面，用开发者工具把它改成网格布局，从零写一遍行列定义，看能不能还原原来的排布，能做到这一步才算把手感用到了实处。
同类工具怎么选
| 工具 | 授权 | 差别在哪 |
|---|---|---|
| CSS Diner | 开源免费 | 同类闯关游戏，练的是选择器而不是布局 |
| Learn CSS Layout | 免费闭源 | 用文字讲布局概念，一个主题配一段说明 |
| MDN Web Docs | 开源免费 | 网格属性的完整语义与兼容情况，写真实页面时必查 |
谁适合用
- 学过弹性布局但没系统用过网格布局的前端新手
- 写复杂页面排布、需要理清行列概念的人
- 给学生讲布局、想找个直观演示方式的老师
怎么开始
- 打开页面并在界面上切换到中文界面。
- 读每关要求，先想清楚要让菜地排成几行几列。
- 在编辑框里写网格属性，观察菜地和水管的变化。
- 过关后把数值改成比例单位，看窗口缩小时的表现。
- 通关后找一个真实页面，自己用网格方式重排一遍。
常见问题
需要装东西吗？
不用，浏览器打开就能玩。
有中文吗？
提供多种语言，可在页面里切换，具体语种以站点实际为准。
和弹性布局那个游戏冲突吗？
不冲突，两者练的是不同方案，实际项目里经常搭配使用。
多久能玩完？
总关数不多，认真做一遍几小时内可以完成，具体以站点实际关卡为准。
授权与合规
项目以开源方式发布在 GitHub 上，网页免费游玩，并提供多种语言。 官网：cssgridgarden.com。
继续找同类资源
这条属于「学习资料」栏目，同栏目还有更多可直接使用的免费资源，可以在 学习资料全部资源 里按需翻阅。
相关资源
同栏目下这几条也常被一起翻到：
资源信息
界面语言
多语言
授权方式
开源免费
适用平台
Web
获取方式
直链下载
资源更新
2026-09-20
页面更新
2026-09-20
↓ 获取资源
点击按钮直接前往资源页面。
