What Is Grid Garden?

Updated

Grid Garden is a browser-based game for practicing CSS Grid layout. You play by writing real CSS grid properties to water carrots across a series of levels, and the page advances only when your code produces the right layout. It suits beginners who have read the basics of grid-column, grid-row, and grid-area and want repetition, or intermediate users who want a quick, low-stakes way to test whether they actually remember how line numbers and spans behave. It is not a full CSS course, a reference, or a layout tool.

What you actually do in the game

Each level shows a grid of soil plots with carrots (and later, weeds) placed on specific cells. Your job is to write CSS that moves the water to the carrots and away from the weeds.

The loop is the same at every level:

  1. Read the level's goal from the on-screen instructions.
  2. Write CSS in the editor panel, typically targeting an element such as #water or #poison.
  3. The grid updates as soon as your code is valid, so you see the result immediately.
  4. Fix mistakes until the layout matches the goal, then continue to the next level.

A typical early solution looks like this:

#water {
  grid-column-start: 1;
  grid-column-end: 4;
}

The expected result is that the water spans columns 1 through 3 and reaches the carrots in that row. If nothing moves, the usual causes are a missing semicolon, a misspelled property, or line numbers that count from the wrong edge — remember that negative numbers count back from the end of the grid.

What it covers, and what it doesn't

Dimension Grid Garden
Format Level-based browser game with an in-page CSS editor
Core skills practiced grid-column-start/end, grid-row-start/end, grid-area, span, negative line numbers, order
Feedback Instant visual update on the grid; no written explanations of wrong answers
Prerequisites Basic CSS syntax and a rough idea of what a grid line is
Not included Systematic lessons, property reference, Flexbox or responsive layout theory, certificates

Because there is no explanatory layer, the game works best alongside documentation. When a level stumps you, look up the specific property rather than guessing — the game will not tell you why an answer is wrong.

Practical details

Grid Garden is created by Codepip, the same team behind Flexbox Froggy, and the page links to that game plus Anchoreum for further practice. The interface is available in a long list of languages, including English, Spanish, French, German, Portuguese (both Brazil and Portugal variants), Russian, Arabic, Hindi, Chinese (Simplified and Traditional), Japanese, and Korean, so you can switch the instructions to your native language while still writing CSS in English.

The page shows a level selector and a reset control, so you can jump back to earlier levels or restart if you want to re-drill a concept. No account or installation is needed to start playing; the game runs directly in the browser.

When it's the right choice

Choose Grid Garden if you want short, repeatable drills that build muscle memory for grid line placement, and you are comfortable learning the "why" from docs or a course. Skip it if you need a structured curriculum, an explanation of how grid interacts with responsive design, or a way to debug a real project layout — for those, a reference guide and your browser's dev tools will serve you better.