Grid Garden

Grid Garden is a browser game for learning CSS grid layout. You write a few lines of CSS to water the carrots in a garden, and each level adds a new idea.

Each of the 28 levels gives a short instruction and a grid with carrots to water. You write CSS properties such as grid-column-start to choose which cells get water, and a Next button takes you to the following level. The game shows how grid lines and tracks work by letting you see the result of each change.

• 28 levels that build up CSS grid skills
• Place items using grid line properties
• Edit CSS and see the result straight away
• Short instructions at the start of each level
• Links to other CSS games such as Flexbox Froggy

Beginners who have seen CSS grid in a tutorial but find it hard to picture how the grid lines work. It also suits anyone who learns best by doing.

The game runs in the browser and its code is open source under the MIT license, published on GitHub. It covers CSS grid only, so other resources are needed for other layout methods. The page suggests Flexbox Froggy and Anchoreum for more CSS practice.