Grid Garden

A game for learning CSS grid layout by watering your carrot garden

🎮 Click to activate game controls

Instructions

Learn CSS Grid Layout by watering your carrot garden! Type CSS grid commands to position garden tools and water the carrots. Master properties like grid-column-start, grid-column-end, and more through 28 challenging levels.

Other Games

2048

Combine tiles to reach 2048!

Hextris

An awesome puzzle game inspired by Tetris with hexagonal blocks and rotation mechanics

HexGL

Futuristic, fast-paced racing game inspired by Wipeout and F-Zero series

Radius Raid

A space themed shoot 'em up where you must blast away unrelenting enemies before they destroy you

Slay The Web

Slay the Spire inspired card game in your browser

Tower Building

Stack blocks to build the tallest tower possible!

Flexbox Froggy

A game for learning CSS flexbox layout by guiding a frog to its lily pad

Grid Garden

Instructions

Other Games

2048

Hextris

HexGL

Radius Raid

Slay The Web

Tower Building

Flexbox Froggy

Frequently Asked Questions - Grid Garden

What is Grid Garden?

How do I play Grid Garden?

What CSS Grid properties will I learn?

How many levels are there?

Do I need CSS experience to play?

Can I use this for learning web development?

What makes this different from other CSS tutorials?

Can I skip levels if I'm stuck?

Is this suitable for teachers and students?

What happens when I complete all levels?

Can I replay levels?

Is Grid Garden available in multiple languages?