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%;