Grid Garden - A game for learning CSS grid

Grid Garden: CSS Grid Learning Game

Objective: Learn CSS grid layout properties by writing code to "water" a carrot garden.
Core Mechanic: Use specific CSS grid properties to target and manipulate garden plots.
Featured Property: The game introduces grid-column-start to define the starting vertical grid line for an element.
Technical Example:
- grid-column-start: 3; targets the area beginning at the third vertical border from the left.
Grid Setup: The game environment utilizes a 5x5 grid structure defined by:
- display: grid;
- grid-template-columns: 20% 20% 20% 20% 20%;
- grid-template-rows: 20% 20% 20% 20% 20%;