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.

How the 28 levels build on each other

The 28 levels move through grid properties in roughly the order a real layout needs them: the early levels only ask for grid-column-start or grid-row-start to place a single item, the middle stretch introduces grid-template-columns and grid-template-rows to size the whole grid, and the final handful combine shorthand like grid-template and grid-area in one rule. By around level 20 a correct answer often chains two or three properties together instead of one, for example grid-column-start: 3; grid-row-start: 2; so both values have to match before the carrot patch waters. Each level's instruction panel names the exact property it is testing, so typing a near-miss like grid-column instead of grid-column-start leaves the patch dry and the Next button stays inactive. Because the sequence is cumulative, a level in the mid-to-late 20s can ask you to recall a property from ten or more levels earlier rather than teaching something new, which is the part a short summary of "CSS grid game, 28 levels" tends to skip.