Grid Garden

Grid Garden: Learn CSS Grid Layout Through Fun Coding Challenges

Discover how to use CSS Grid Layout effectively with Grid Garden, a game-based learning platform where you write CSS code to grow carrots in a virtual garden.

What is Grid Garden?

Grid Garden is an educational game that teaches the basics of using CSS grid layout. It was created by Thomas Park and published by Codepip to help web developers learn about positioning elements in a grid format.

In the game, you write CSS code to grow carrots in a garden grid. Each level provides a grid garden layout and poses a challenge to grow carrots in certain cells by targeting them with CSS grid properties. As you progress through the levels, the grid coding challenges become more complex and build on concepts introduced in previous levels.

For example, early levels may ask you to use properties like grid-column and grid-row to grow carrots in simple patterns. Later levels combine multiple grid properties to solve tasks like spanning carrots across multiple rows/columns, using negative positioning, auto-placement, grid template areas, and more.

As you solve each CSS grid coding challenge successfully, you water the correct carrot plants and progress to the next level. The game has 30 levels in total and provides hints if you get stuck. The step-by-step progress makes it a great interactive tutorial for quickly gaining hands-on practice with CSS grid concepts.

Grid Garden Features

Official Links