How to Start Playing Grid Garden on cssgridgarden.com

Updated

Open cssgridgarden.com in any modern browser and you can start playing immediately — the game loads directly into a level, and no account or sign-up is mentioned on the page. You type CSS grid properties into the editor to water the carrots, then use Next to advance and Reset to restart the current level.

What you see when the page loads

The page is titled Grid Garden and is described as "a game for learning CSS grid layout." The interface is a single game screen rather than a landing page with a start button:

  • A level indicator showing your position (the page displays "Level 1 of 1" as the starting state).
  • A code area where you write CSS grid rules.
  • The garden view that responds to your CSS.
  • A Reset control to restart the current level.
  • A Next control to move on once a level is solved.

Because the game begins at Level 1, there is no separate "play" step to hunt for.

Step-by-step: playing your first level

  1. Open the site. Go to cssgridgarden.com in your browser. The game loads in English by default.
  2. Read the level instruction. Each level tells you what to accomplish — typically watering specific carrot plots by placing grid items.
  3. Write CSS in the editor. Use grid properties such as grid-column, grid-row, and related placement rules to position the water. The garden view updates as your CSS takes effect.
  4. Check the result. If the correct plots are watered, the level is solved and you can continue.
  5. Click Next to advance to the following level.
  6. Click Reset at any time to clear your current attempt and start that level over.

The expected outcome of each level is a correctly watered garden; the exact property needed changes from level to level, so read each instruction before editing.

Moving through levels and restarting

Action Control When to use it
Advance to the next level Next After the current level's goal is met
Restart the current level Reset When your CSS isn't working and you want a clean attempt
Jump to a level Level selector To revisit or skip ahead

The level selector at the top lets you move between levels directly, so you don't have to replay everything to return to a spot you want to practice.

Language options

Grid Garden is available in many languages, selectable from the list at the bottom of the page. Options include English, Español, Français, Deutsch, Nederlands, Italiano, Português (BR and PT), Català, Svenska, Norsk, Suomi, Polski, Slovenčina, Magyar, Română, Shqip, Български, Eesti, Latviešu, Lietuvių, Русский, Українська, Ελληνικά, Türkçe, Հայերեն, Azərbaycanca, العربية, فارسی, پښتو, اردو, हिन्दी, বাংলা, தமிழ், 简体中文, 繁體中文, 日本語, 한국어, Tiếng Việt, ภาษาไทย, Bahasa Indonesia, Tagalog, and Yorùbá. Switching language changes the interface text, not the CSS you write.

Related practice games

The page links to other Codepip games for continued CSS practice:

  • Flexbox Froggy — for learning CSS flexbox layout.
  • Anchoreum — another Codepip CSS game linked from the same footer.

These are useful once you've worked through Grid Garden and want to practice a different layout system.

Common snags

  • Nothing happens after editing CSS: confirm your rule targets the grid container or item the level expects; a misplaced selector leaves the garden unchanged.
  • You want a fresh start mid-level: use Reset rather than reloading the page.
  • You can't find a "start" button: there isn't one — the game opens on Level 1 directly.
  • You want to practice a specific concept: use the level selector to jump to the relevant level instead of replaying from the beginning.

Grid Garden is created by Codepip, and the page also links to its YouTube, Twitter, and GitHub profiles if you want to follow updates or report issues.