Learn CSS grid by typing rules that water the carrots and poison the weeds in a small 5x5 garden plot.
CSS Grid Carrot Patch turns the CSS grid layout system into a gardening job. Your plot has twenty-five squares of soil in five rows, and some of them sprout carrots or weeds. You write CSS that moves water onto the carrots and poison onto the weeds until every plant has been handled.
The garden is a real grid container, so the patch shifts each time you type. Seeing it slide around helps line numbers and spans click far faster than a page of notes would.
Getting started
Each level shows a brief explanation, a box for your code and the plot itself. Most of the stylesheet is already filled in, and you only add the declarations that are missing. When the water or poison sits on exactly the right cells, the Next button switches on. Click it and the plants change to their treated look before the next level appears.
Highlighted property names in the lesson are worth pointing at. They open a list of the values that property will accept.
What the 28 levels cover
The early stages work with one property at a time:
- Placing a patch with
grid-column-startandgrid-column-end, including negative numbers that count back from the right edge. - Using
spanto give a width instead of an end line. - The
grid-columnandgrid-rowshorthands, thengrid-areafor all four edges at once, sometimes with two patches overlapping. - The
orderproperty for items placed automatically. - Reshaping the whole garden with
grid-templateplus its separate properties for rows and for columns.
Along the way you meet percentages, pixels, ems, repeat() and fr units. A short win screen appears after the last level.
Common mistakes
The biggest trap is counting cells instead of lines. Grid lines sit between cells, so a garden with five columns has six vertical lines. A patch that covers columns 2, 3 and 4 starts on line 2 and ends on line 5, which you write as grid-column: 2 / 5. When you know how wide a patch should be, span saves you the math.
Another slip is the value order inside grid-area. It takes row start, then column start, then row end, then column end. That is not the order margins use, so it is easy to mix up.
With fr units, remember that fixed sizes are worked out first. Whatever space remains is then split by the fr numbers, so 1fr 5fr hands one share to the first track and five to the second.
Why it’s worth a try
You learn by changing real code and seeing the result at once, which tends to stick better than a list of rules. Since your answers are saved as you go, it also works well in short sessions spread over a few days.
Controls
| Action | Keyboard | Mouse | Touch |
|---|---|---|---|
| Type CSS | Type in the code box | — | Tap the code box and use the on-screen keyboard |
| Submit a correct answer | Enter on the last line, or Ctrl + Enter | Click "Next" once it lights up | Tap "Next" |
| Pick a level | — | Click the level counter, then a level number, or use the side arrows | Tap the level counter, then a level number |
| Read about a property | — | Point at a highlighted property name in the instructions | — |
CSS Grid Carrot Patch FAQ
Who is CSS Grid Carrot Patch made for?
It suits anyone starting out with web layout, from students in a coding class to self-taught beginners. You do not need to know grid beforehand. Each of the 28 levels explains one new property, and you try it on the garden straight away.
Does it work on a Chromebook or tablet?
Yes. On a narrow screen the garden and the code box stack into a single column, and the on-screen keyboard works for typing. A laptop or Chromebook with a mouse is a little easier, because the property tips open when you point at them.
Can I come back later and keep going?
Yes. Your current level, the code you typed and the list of finished levels stay in your browser. If you want a clean slate, the level menu has a Reset link that clears everything.
What if my code is right but different from the hint?
That still counts. The game applies your CSS and then checks that each patch lands on exactly the cells of its plants. Any rules that put water and poison in the right places will pass.
