Grid Garden teaches CSS Grid by having you water carrots in a garden using grid properties. Each level introduces concepts like grid-template-columns, grid-column, grid-row, and grid-area. The visual layout updates as you write code, so you can see exactly how each property affects the grid. There are 28 levels covering the core of the Grid specification.

CSS Grid is powerful but has a lot of moving parts. Working through the levels builds intuition for how tracks, lines, and areas interact. It pairs naturally with Flexbox Froggy for a complete foundation in modern CSS layout. The game is free, browser-based, and suitable for both beginners and developers who want to refresh their understanding.