Initializing, please wait a moment

Grid Garden - Learn CSS Grid by Playing

Grid Garden turns CSS grid practice into a watering job: type grid properties into the editor and the right carrot patches get watered, across 28 levels. About ~1.0 MB after Play, no install, no account.

Already comfortable with CSS grid? Flexbox Froggy drills flexbox the same way, or switch gears entirely with Cat Typing Race.

GRID GARDEN

The gardening happens through code: type a CSS grid rule into the editor and the matching carrot patches get watered. The sequence runs grid-column-start through grid-template over 28 levels, with your spot remembered locally under ftol:gridgarden keys. Adapted from Thomas Park's Grid Garden (MIT). About ~1.0 MB.

Type with the keyboard, scroll with the mouse - a wide screen keeps the editor and garden comfortably side by side.

Press Play to load the game.
Level progress uses namespaced localStorage (ftol:gridgarden:*).

Welcome to Grid Garden - a free browser CSS grid teaching game with no account or install.


Key features

  • Write grid properties so water lands on carrot patches across 28 levels.
  • About ~1.0 MB loads after you press Play.

Your progress and privacy

  • Progress stays in this browser under namespaced ftol:gridgarden keys; use Reset in the level menu to clear saved answers.
  • Nothing is uploaded; play stays on-device.

More free browser games

For more free browser games, open the games hub. Related picks: Flexbox Froggy and Pipe Rotate Puzzle.