Count grid lines rather than occupied cells
Read the level's watering goal, then identify the lines that bound the intended area. Grid placement is described with boundaries and tracks; a line number is not simply the number of a colored cell. Before entering CSS, point to the start and end boundaries you want. That small distinction makes it easier to predict the area a rule will cover rather than discovering it only after the water moves.
When a task uses a span, think about how many tracks the area should cover. Do not translate that directly into pixel distance or reuse a flexbox alignment rule merely because both games involve CSS. Enter one change in the editor, observe the watered area and compare it with the carrots or other targets specified by the level. The current task decides what counts as success; a visually broad area is not automatically the intended solution.
Use the shape of the result to diagnose the rule
If the watered region starts in the wrong place, inspect the chosen starting boundary. If it starts correctly but ends too early or too late, inspect the end or span. If it changes along the wrong direction, check which row or column property you used. Naming the geometric error gives you a precise next edit and helps avoid replacing several correct parts of the rule at once.
After a successful attempt, explain which lines enclosed the target and how the rule selected them. That explanation carries forward better than a disconnected answer string because later levels can use a different grid or combine constraints. This center supports the actual interactive CSS garden and its level instructions. It does not promise a pixel-based layout tutorial, an external certification or a complete answer sheet tested against every version. Use the play page for the editor controls, then return here when you want a focused way to review a positioning mistake.
For example, if water covers one track too many, mark the desired ending boundary and compare it with the value or span you entered. Keep the correct start unchanged while revising the end. If the result moves to a different row, inspect the row rule separately from the column rule. When the target is covered correctly, describe the boundaries and tracks in words. The exercise is to connect CSS placement with the visible grid, which is useful on a new arrangement where the previous answer string no longer selects the intended area.
Grid Garden tips and strategy
Tick a tip to focus on in your next run. This checklist does not change your game or save progress.
Grid Garden questions and answers
What topic does Grid Garden teach?
It provides interactive practice with CSS grid through garden-layout puzzles.
Do I control a moving character?
No. The main interaction is entering CSS that changes grid placement.
What is the original source?
Thomas Park’s Grid Garden provides the MIT-licensed source and CC BY 3.0 artwork used in this reviewed edition.
Does a start line of 2 and an end line of 4 cover four cells?
No. grid-column-start: 2 and grid-column-end: 4 select the space between lines 2 and 4: two column tracks. The end line is a boundary, not another watered cell. Count the intervals between lines, or use a span of 2, then check the highlighted area before changing the row placement as well.
Controls and full game instructions
Controls and full game instructions
Play Grid Garden