CSS Grid Garden Activity

What you'll learn

• How to position items precisely on a CSS grid
• Grid line numbering and referencing system
• Shorthand properties for efficient grid layouts
• Alignment techniques for grid items and containers
• Creating complex 2D layouts with spanning elements

Objective

To apply concepts of CSS Grid through an interactive activity.

Before You Start

Checklist:

• Have a computer with internet access
• Open your web browser (Chrome, Firefox, or Safari recommended)
• Have a notebook ready to jot down new CSS properties
• Review your CSS Grid lesson notes if needed

Activity: Grid Garden

Description

In this activity, you will learn and practice CSS Grid by playing Grid Garden, a game where you grow a carrot garden using CSS code.

Instructions

:computer: Part One: Access the Game (2 minutes)

1. Open your web browser
2. Navigate to Grid Garden: Grid Garden
3. Wait for the game to fully load
4. Read the welcome screen carefully

:computer: Part 2: Play the Game (30-40 minutes)

1. Start from Level 1 - Even if you know some CSS Grid, start from the beginning
2. Complete at least Level 19 - This ensures you cover all fundamental concepts
3. Pay attention to these CSS properties as they're introduced:
   • grid-column-start and grid-column-end
   • grid-row-start and grid-row-end
   • grid-column (shorthand)
   • grid-row (shorthand)
   • grid-area (super shorthand)
   • justify-items and align-items
   • justify-content and align-content

:speech_balloon: Part 3: Understand the Concepts (5 minutes)

1. After each level, pause and think about what you just learned
2. Try to predict how the grid will behave before typing your answer
3. Experiment with different values if you're unsure
4. Take notes of patterns you notice

:bulb: Tip Stuck on a level? Don't worry! CSS Grid can be tricky at first. Try these strategies:

• Count the grid lines carefully (they start at 1, not 0!)
• Use the visual preview to understand what the code should achieve
• Remember that negative numbers count from the end
• If really stuck, it's okay to peek at online solutions, but make sure you understand why it works!

Common Grid Patterns You'll Learn

Basic Positioning

grid-column: 2;        /* Place in column 2 */
grid-row: 3;           /* Place in row 3 */

Spanning Cells

grid-column: 1 / 4;    /* Span from column 1 to 4 */
grid-row: span 2;      /* Span 2 rows */

Using Grid-Area

grid-area: 1 / 2 / 3 / 4;  /* row-start / col-start / row-end / col-end */

:bulb: Tip Pro tip: The grid-area shorthand follows the order: row-start / column-start / row-end / column-end. Remember it as "top, left, bottom, right" - like a clock going counterclockwise from 12!

Expected Outcomes

After completing Level 19, you should be comfortable with:

• Positioning grid items precisely using grid properties
• Understanding grid line numbering and how to reference them
• Using shorthand properties for efficient CSS writing
• Aligning items within grid cells and containers
• Creating complex layouts with overlapping and spanning elements
• Applying CSS Grid to solve real-world layout challenges

Troubleshooting

Common Issues and Solutions

Carrots not moving where expected?

• Double-check your grid line numbers
• Remember: grid lines start at 1, not 0
• Negative numbers count from the opposite end

Confused about span?

• span 2 means "take up 2 grid tracks"
• It's different from specifying start/end positions

Grid-area syntax confusing?

• Break it down: row-start / col-start / row-end / col-end
• Try using individual properties first, then combine

:emoji:️ Reflection Activity (5 minutes)

After completing the game, answer these questions in your notebook:

1. Which CSS Grid property did you find most useful?
2. What was the most challenging level and why?
3. How could you use CSS Grid in a real website project?

:information_source: Time to Submit! Once you've completed Level 19 and your reflection, you're ready to move on to the next concept. Great job mastering CSS Grid!

Why This Matters

CSS Grid is the most powerful layout system available in CSS, enabling you to create complex, responsive 2D layouts that were previously impossible or required complex workarounds. Mastering CSS Grid will make you a more effective web developer and enable you to create sophisticated, professional layouts.

Ready to grow your carrot garden? :emoji: Let's start your CSS Grid adventure!