What CSS Grid Layout Skills Can You Practice in Grid Garden?

Updated

Grid Garden is a browser-based puzzle game from Codepip that teaches CSS Grid by having you water carrots with grid properties. You practice placing and spanning items with grid-column and grid-row, counting grid lines, and reasoning about columns and rows — all by writing real CSS in each level instead of reading documentation. It suits beginners who already know basic CSS selectors and want hands-on syntax practice; it is not a full CSS course and does not cover every Grid feature.

What the game actually is

The page identifies it as "a game for learning CSS grid layout," created by Codepip, with links to YouTube, Twitter, and GitHub. The interface shows a level selector ("Level 1 of 1" in the captured page state), a Reset control, a numbered grid ruler running 1–14, and a Next button. The page also links to sibling games — Flexbox Froggy and Anchoreum — and offers the interface in dozens of languages, including 简体中文, 繁體中文, 日本語, and 한국어.

The core loop: each level shows a garden grid with carrots (and later weeds), you write CSS rules in an editor, and the browser renders the result immediately. When the carrots are watered correctly, you advance.

Skills you practice, level by level

Grid lines and counting

The numbered ruler across the top is the game's main teaching device. Early levels force you to translate "the third column line" into grid-column-start: 3 rather than guessing pixel positions. This is the single most transferable skill in Grid: lines, not containers, are what you position against.

Placing items with grid-column and grid-row

You set start and end lines on the carrot elements. A typical early solution looks like:

#carrot-1 {
  grid-column-start: 2;
}

Later levels require both axes, so you write grid-row-start alongside grid-column-start and watch the item move to the intersection.

Spanning with the span keyword

Once single-cell placement is comfortable, levels ask you to cover a range. The game accepts both line-to-line and span syntax, so you practice the distinction:

#carrot-2 {
  grid-column-start: 1;
  grid-column-end: span 3;
}

This is where the span keyword stops being abstract — you see exactly how many cells it covers.

The shorthand properties

As levels progress, the verbose start/end pairs become unwieldy, which naturally pushes you toward grid-column: 2 / 4 and grid-row: 1 / span 2. The game rewards the shorthand because it is faster to type, not because it tells you to use it.

Negative line numbers

Later levels introduce counting from the end of the grid with negative values (e.g., grid-column-start: -2). This is a concept many tutorials mention once and readers forget; the game makes you use it to solve a puzzle.

The grid-area shorthand

The final stretch typically requires the four-value grid-area: row-start / column-start / row-end / column-end form, which is the densest Grid syntax and the one most likely to be mis-ordered in real code.

What it does not cover

Based on the game's scope, expect no practice with grid-template-areas named regions, repeat() and minmax() for responsive tracks, auto-fit/auto-fill, implicit grid behavior, or alignment properties like justify-items and align-content. Those are better learned from MDN or a layout tutorial after you finish the game. The page itself only claims to be "a game for learning CSS grid layout" and points to Flexbox Froggy for flexbox — it makes no broader curriculum claim.

How to get the most out of it

  1. Turn off autocomplete hints in your editor if you use one — the point is recalling property names and line numbers, not tab-completing them.
  2. Predict before you type. Read the level, say the line numbers out loud, then write the rule. If you are wrong, the visual feedback tells you immediately, which is the actual learning moment.
  3. Rewrite each solution in shorthand after it passes. Solving with grid-column-start/grid-column-end and then compressing to grid-column: 2 / 4 doubles the practice per level.
  4. Reset and redo levels cold a day later. The Reset control makes this trivial, and spaced repetition is what moves syntax from "looked up" to "known."
  5. Switch the interface language if English is not your first language — the page lists translations including Chinese, Japanese, Korean, and Arabic — but keep writing the CSS in English, since property names are not translated.

Who should use it, and when to move on

Use Grid Garden if you can write a basic CSS rule and select elements by ID, but freeze when asked to place something on a grid. It is a syntax-drilling tool, not a design tool: it will not teach you when to choose Grid over Flexbox, how to build a page layout, or how to make a grid responsive.

Move on once you finish the levels and can write grid-area from memory. At that point, the productive next step is rebuilding a real layout — a card gallery or a page shell — with grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)), which the game does not exercise. Flexbox Froggy, linked from the same page, covers the complementary flexbox syntax if you have not done it yet.