Grid Garden

Welcome to the series of #CodingWhileGaming where we will accompany you on your journey in learning how to code and playing at the same time!

In this part, we want to introduce you to Grid Garden.

Grid Garden is a game that proposes to introduce you to grid functions in CSS3.

In this game, you must water your carrot crops and poison the weeds by mastering CSS grid, a powerful module that makes 2-dimensional grid layouts a piece of cake. You can define columns, rows, and grid template areas with it.


It is a real playground for learning and studying all the different layout properties of the CSS grid.


This adventure through 28 levels won’t make you an expert, but it will give you a solid foundation on which to continue learning.

This game is adapted for beginners of CSS grids, however, familiarity with the basics of CSS is a plus (not required).

Click here to start learning CSS3 grid functions!