Grid Garden

Grid Garden teaches CSS Grid with a vegetable patch and a code box. Each puzzle asks you to place water over carrots or poison over weeds by writing a real layout rule, turning rows, columns, spans, and shorthand into something you can see move.

What is Grid Garden?

The garden is a compact practice field for one of CSS's more slippery layout systems. A prompt sets the target, the editor takes your rule, and the plot shows whether the grid landed where it should. The early exercises build the basic map; later ones combine sizing and placement into puzzles that demand a little more than syntax recall. There are 28 levels, but the course stays breezy enough for a lunch-break refresher, and the level controls let a stuck gardener move on instead of composting the whole session.

What you can do there

• Write CSS Grid rules in the built-in editor
• Move water and poison across garden plots
• Advance through 28 layout puzzles

Why we picked it

The vegetable theme is not just garnish. It makes invisible layout tracks feel physical, and the fast connection between typed CSS and a changed garden gives dry documentation a satisfying little crunch.

How to get the most from it

Read the level's goal, enter only the CSS needed in the editor, and compare the result with the carrot or weed positions. If a shorthand feels mysterious, try equivalent values and use the level selector to revisit the idea later.

Good to know

The game is free, open source, and available in many languages. It teaches a useful slice of CSS Grid rather than every property, so keep a reference such as MDN nearby when you want the full specification or production edge cases.

Who made it, and when?

Thomas Park is the credited creator or organization. The earliest supported launch date we found is April 3, 2017.