精选 Featured 游戏/互动 Game / interactive

CSS Grid Garden CSS Grid Garden

用浇水闯关来学网格布局。 Learn grid layout as a game of watering a garden.

详细介绍Details

用浇水闯关学习 CSS Grid。与 Flexbox Froggy 同一作者系列，开源，可在浏览器里直接玩。 Learn CSS Grid by watering a garden. Same author series as Flexbox Froggy, open source, playable in the browser.

适合学什么What to learn

游戏/互动 Game / interactive
可直接玩或操作的教学游戏与 WebGL 演示。 Teaching games and WebGL demos you can play in the browser.

为什么推荐Why we recommend it Grid 布局的对照练习页，URL 长期稳定。 A counterpart practice page for Grid layout. The URL has been stable for years.

CSS Grid Garden CSS Grid Garden

详细介绍Details

适合学什么What to learn

同类型Same type

M3E Canvas：在浏览器里拖出 Material 3 界面草图，一键变成给 AI 写 App 的提示词 M3E Canvas: sketch Material 3 Expressive screens in the browser and turn them into a prompt for your AI coding tool

CUBE Type：打几个字，变成等距方块字，免费导出图片或循环动图 CUBE Type: type a few words and get isometric block letters, free image or loop export

Triple-A Minesweeper：把扫雷做成「3A 大作」的恶搞网页游戏 Triple-A Minesweeper: classic Minesweeper parodied as a AAA blockbuster in the browser