Our playing guide
Grid Garden · How to play
Grid Garden turns CSS grid lines into garden boundaries. Editing declarations changes where water or treatment lands, with the planting area acting as the target.
Controls
Enter CSS grid properties. Place blue water over carrots and treatment over weeds. English instructions included.
Rules & goal
- Enter grid-column, grid-row and other grid declarations in the editor.
- Match blue water to carrots and purple treatment to weeds as the lesson instructs.
- Twenty-eight lessons cover start and end lines, spans, areas and track sizes. Advance after a correct placement.
Beginner tips
- Line numbers describe boundaries rather than cells. Count edges before choosing a start.
- For span, first decide how many cells to cover. Negative line numbers count backward from the end.
Progress & devices
Play in a desktop or mobile browser using the controls above. Some games save only in the current browser; clearing site data can remove saves. Pause when stepping away. Reloading is not guaranteed to preserve the current round.