CSS Grid Carrot Patch Unblocked

CSS Grid Carrot Patch teaches the most powerful layout tool in modern web design using a vegetable plot. That plot is a genuine grid container, five squares by five, with some carrots and weeds growing in the soil. Your CSS places a patch of water or poison, and the patch shifts as you type, so you see the effect of every number instantly. Grid line numbers and spans that seem abstract in documentation become obvious when a puddle slides two squares to the left. Thomas Park’s game plays unblocked here.

Planting the Code

Each level has three parts: a short lesson on the left, a code box with most of the stylesheet already filled in, and the garden. You type the missing declarations. When the water sits precisely over the carrots, or the poison precisely over the weeds, Next becomes clickable, and pressing it shows the treated plants before the following lesson appears.

The answer checker is flexible. It looks at the result, not your wording, so any valid CSS that puts each patch in the right place and at the right size is accepted.

Here is the path the 28 levels follow:

• Start and end lines. grid-column-start and grid-column-end, including negative numbers that count from the far edge.
• Span. Set a width with span instead of naming an end line.
• Shorthands. grid-column and grid-row combine start and end; grid-area sets all four at once. Some levels use two overlapping patches.
• Order. The order property moves items that were placed automatically.
• Templates. grid-template-columns, grid-template-rows and the grid-template shorthand redraw the grid itself, using percentages, pixels, ems, repeat() and fr units.

Clear level 28 and a brief victory screen appears.

CSS Grid Carrot Patch controls

To do this	Keyboard	Mouse	Touch
Enter your CSS	Type in the code box	—	Tap the code box and use the on-screen keyboard
Hand in a working answer	Enter on the last line, or Ctrl + Enter	Click "Next" once it lights up	Tap "Next"
Choose any level	—	Click the level counter, then a level number, or use the side arrows	Tap the level counter, then a level number
See notes on a property	—	Point at a highlighted property name in the instructions	—

Getting the Numbers Right

The biggest hurdle for newcomers is line numbering. Picture the fences between garden beds rather than the beds. A patch that covers the second, third and fourth columns starts at fence 2 and ends at fence 5, written grid-column: 2 / 5.

When you know how wide a patch should be but not where it ends, span is cleaner. grid-row: 3 / span 2 means “start at line 3 and cover two rows”.

The grid-area shorthand trips up many people because of its order, which begins with the row start, then the column start, then the two end lines in that same order. That is not the top, right, bottom, left order used by margins and padding, so write it out slowly the first time.

In the template levels, think of fr as “a share of the leftover space”. Fixed sizes like 50px are subtracted first, and whatever remains is divided by the fractions.

Finally, point at any highlighted property name in a lesson. A tooltip lists the values that property accepts, which often hints at the answer.

Where to Go Next

This is a natural follow-up to CSS Diner, which covers selectors, and a companion to Flexbox Lily Pond, which handles one-dimensional layout. Grid layout is where many front-end learners finally feel in control of a page.