What is Grid Garden?
Grid Garden is a coding game for learning CSS grid, the part of CSS used to build two-dimensional page layouts. Each level shows a garden made of a grid of plots. You type CSS to place a patch of water over the carrots, or a patch of poison over the weeds, without touching anything else. When your code covers the right squares, the level is done.
The 28 levels start with grid-column-start and grid-column-end, then move on to grid-row, grid-area, order, grid-template-columns, grid-template-rows and grid-template. Every level explains the property it introduces. Grid Garden is made by Codepip, the same maker as Flexbox Froggy, and its code is open source on GitHub. It is translated into dozens of languages.
Main Features
- 28 short levels that teach CSS grid
- Type real CSS and see the water or poison land on the grid
- Covers grid-column, grid-row, grid-area, order and grid-template
- A short explanation of each property on every level
- Jump to any level from the level menu
- Available in dozens of languages
- Open source code on GitHub
How to Get Started with Grid Garden
- Open cssgridgarden.com in your browser.
- Read the instructions for level 1 on the left.
- Type the CSS that places the water over the carrots.
- Check the garden, then press Next when the level is solved.
- Keep going until you have grown the whole garden across all 28 levels.
Grid Garden Pricing
Grid Garden is free to play in the browser with no account. Its maker Codepip sells a Pro membership for other games on codepip.com, but Grid Garden itself is listed as a free game.
Who Should Use It?
- Beginners learning CSS layout
- Students in web design and coding classes
- Teachers who want a hands-on CSS grid exercise
- Developers who want a quick CSS grid refresher
- Anyone who likes short logic puzzles
Grid Garden Alternatives
- freeCodeCamp has free lessons on CSS grid as part of its responsive web design course.
- CodePen lets you build and test grid layouts in your browser and see changes live.
- The Odin Project is a free web development course that covers CSS layout through projects.
Frequently Asked Questions
Is Grid Garden free?
Yes. Grid Garden is free to play in your browser and does not need an account.
How many levels does Grid Garden have?
It has 28 levels, and you can jump to any of them from the level menu.
What CSS does Grid Garden teach?
It teaches CSS grid properties such as grid-column, grid-row, grid-area, order, grid-template-columns, grid-template-rows and grid-template.
Do I need to know CSS to play?
No. It is made for beginners. Knowing the basics of CSS helps, but each level explains what you need.
Who made Grid Garden?
Grid Garden is made by Codepip, the maker of Flexbox Froggy and other coding games.