Initializing, please wait a moment

Grid Garden - Learn CSS Grid by Playing

Grid Garden is a free browser game that teaches CSS grid. Type grid properties in the editor to water carrot patches across 28 levels. About ~1.0 MB after Play, no install, no account.

Want another free browser puzzle? Try Flexbox Froggy. Want a typing race instead? Try Cat Typing Race.

GRID GARDEN

Write CSS grid in the left editor to water carrot patches. 28 levels from grid-column-start to grid-template. Progress saves in this browser under ftol:gridgarden keys. Adapted from Thomas Park's Grid Garden (MIT). About ~1.0 MB.

Keyboard + mouse. Best on a wide screen so the editor and garden sit 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.

Share Tweet Share Post

Last updated: Sep 13, 2026

See all Back to Games →

Related tools:

Snake Classic - Snake Classic - Press an arrow key (or swipe on a phone) and the game starts instantly - eat the
Retro Tank Battle - Retro Tank Battle - Drive your tank with the arrows or WASD, fire with Space, and clear the wave of
Garden Defense - Garden Defense - Pick a defender card - Shooter (100 energy), Battery (50, makes more energy), or
Voxel World Builder - Voxel World Builder - a free browser voxel sandbox: infinite terrain, six biomes, caves and ores,
Sky Gates Flight - Sky Gates Flight - Fly a little plane over the ocean and steer through the gates - green ones add
City Time Machine 3D - City Time Machine 3D - Drag the 1945-2055 timeline and watch one city block's buildings, vehicles,
2048 Game - Merge the Numbers Puzzle - 2048 Game - Merge the Numbers Puzzle - Slide the numbered tiles with the arrow keys, WASD, or a
City Drive Open World 3D - City Drive Open World 3D - a free open-world driving game in the browser: a seeded neon night city
Retro Highway Racer - Retro Highway Racer - a free lo-fi driving game in the browser: steer a randomly generated highway,
Hover Racing - Hover Racing - a free anti-gravity racing game in the browser: pilot a hover ship down a neon 3D
Retro Arcade Shooter - Retro Arcade Shooter - a free lo-fi browser shooter: blast robot spiders through a dark server
Marble Maze - Marble Maze - a free 3D maze puzzle in the browser: roll a ball through a procedurally-generated

Tags: #games

Related guides:

What We Learned Running Free In-Browser Image Tools - What we learned running free in-browser image tools for 100K monthly users - technical choices,
MD5 Hashing in the Browser - What `common::md5::gethash64string` Style Calls Do - MD5 hashing explained for readers searching framework-style method names.
Test LCD: Pick the Right Screen-Test Tool - Test LCD, LCD test, or LCD tester all map to one job: check your screen for dead pixels, color, and
LCD Test Online: Run a Free Browser-Based Screen Test - Lcd Test guide: how to lcd test online, free in your browser.
Make a ZIP File Online - What the Tool Does and When ZIP Saves Space - Make a ZIP file online: when ZIP actually saves space, when it does not, and how to send files or a
JPG vs JPEG - Are They the Same? - JPG and JPEG are the same image format.
CSS Minifier vs Uglifier vs Tree-Shaking - Three size-reduction tactics for one goal.
Image to Base64 - Embed in HTML/CSS vs Link the Image File - Should you embed an image as a base64 data URL in HTML/CSS, or link the image file?
CSS Unminifier vs Prettier - When to Use Each - When CSS Unminifier is the right tool to read shipped CSS quickly, when Prettier is the right tool
Camera Test Permission Blocked - How to Allow Camera Access in Your Browser - Camera test shows nothing or asks no permission prompt?
Microphone Test Permission Blocked - How to Allow Mic Access in Your Browser - Microphone test shows a flat meter or no permission prompt?
How to Hide a Message in an Image (Steganography, Free + In-Browser) - How to hide a secret text message inside a PNG image and read it back, optionally with a password -

Loading reviews...

Frequently Asked Questions

What is Grid Garden?

A free browser game that teaches CSS grid across 28 levels. You type grid properties so carrots get watered.

How do I play?

Press Play, read the instruction, type CSS in the editor (for example grid-column-start: 3;), then click Next when the carrots are watered.

Does it save progress?

Yes, in this browser under namespaced keys ftol:gridgarden:level, answers, solved, and colorblind. Use Reset in the level menu to clear.

How big is the download?

About ~1.0 MB of HTML, CSS, JavaScript, SVG art, jQuery, and animate.css after you press Play.

Is this open source?

Yes. Adapted from Grid Garden by Thomas Park under the MIT license. This site build strips ads/analytics/CDN fonts, vendors jQuery locally, and adds noindex.

Is it good on a phone?

It runs, but the editor plus pond layout is designed for a wider screen. Use landscape or Fullscreen when space is tight.