Carrots need water and weeds need poison, and the only tool you have is a stylesheet. CSS Grid Carrot Patch unblocked by Thomas Park turns grid layout into gardening. You type real properties and watch a patch slide across the soil until it covers the right squares.
Grid lines and spans can feel abstract in a tutorial. Seeing a block of water jump from column two to column four the instant you change a number makes the idea click much faster.
How to play CSS Grid Carrot Patch
Your plot has five rows and five columns, with carrots or weeds growing in some cells. Each level shows a short lesson, a code box with most of the CSS already filled in, and the garden itself. Add the missing lines to move the water or poison into place.
When the patch covers exactly the right plants, the Next button lights up. Click it, or press Enter on the last line, to move on. You can also jump to any level from the level counter at the top.
There are 28 levels in all. You begin by setting where a column starts and ends, then learn span and negative line numbers. Later lessons add the row properties, grid-area and order, and the last ones reshape the grid itself with template rules and fr units.
Controls
| To… | 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 | — |
Tips
- Count lines, not boxes. Lines sit between cells, so five columns means six lines. A patch running from line 1 to line 4 covers three columns, not four.
- Lean on negative numbers. Line -1 is always the far right or bottom edge, which saves you from counting when the grid size changes.
- Use span for width. If you know where a patch starts and how wide it is, span 3 is easier than working out the end line.
- Read the grid-area order carefully. The four values go top line, left line, bottom line, then right line, and many people guess a different order.
- Hover the highlighted words. Pointing at a property name in the lesson pops up a short explanation and example.
CSS Grid Carrot Patch questions
Do I have to type the same answer as the hint?
No. The game checks the result in the garden. Any CSS that puts the water and poison exactly on the right plants is accepted.
Are my answers saved?
Yes. Your current level, solved levels and typed answers stay in your browser. A reset option in the level menu clears them.
Does this match how CSS grid works on real sites?
Yes. The garden is a real grid container styled by your code, so the properties you learn here behave the same way in your own pages.
