Grid Garden

An interactive browser-based game designed to teach CSS Grid layout through 14 progressive levels. Players write CSS Grid properties to grow a virtual garden by placing water and poison for carrot and rose plants. Created by Codepip, the same developer behind Flexbox Froggy, Kern Type, and other popular design learning games. The game covers essential CSS Grid concepts including grid-template-columns, grid-template-rows, gap, grid-column-start, grid-column-end, and grid-area. Each level introduces a new property or concept, building up to complex multi-column and multi-row layouts. Supports 37 languages including English, Spanish, French, German, Japanese, Korean, Chinese, Russian, Arabic, and Portuguese. Available at no cost in any modern web browser without registration. The companion game Flexbox Froggy teaches complementary CSS flexbox layout concepts, and both games are frequently referenced in web development courses and bootcamps worldwide. Source code available on GitHub.