CSS Grid Carrot Patch
CSS Grid Carrot Patch is a small gardening game that teaches CSS grid layout. The garden is a grid of soil, and you write a few lines of CSS to place water over the carrots and weed killer over the weeds.
Thomas Park created the original as an open-source lesson, and it runs in a plain browser tab, so a school Chromebook works fine. Across 28 levels you build up from single grid lines to full template layouts.
How to play CSS Grid Carrot Patch
Each level gives a short lesson on the left and a code box with some CSS already filled in. You add the missing property or value. As you type, the garden on the right updates live, so you can see the patch of water or poison move and stretch.
Once the water sits on all the carrots, the poison sits on all the weeds, and no bare soil gets soaked, the Next button lights up. Press Enter on the last line or click Next to move on. If it stays dark, compare the shaded area with the plants and adjust one number at a time.
Early levels cover grid-column-start and grid-column-end. Later ones bring in grid-row, the span keyword, grid-area, order, and finally grid-template-columns and grid-template-rows on the garden itself.
Controls
| Action | Keyboard | Mouse | Touch |
|---|---|---|---|
| Write CSS | Type in the code box | — | Tap the box and use the on-screen keyboard |
| Go to the next level | Enter on the last line, or Ctrl + Enter | Click Next when it lights up | Tap Next |
| Choose a level | — | Click the level counter or side arrows | Tap the level counter |
| See a property's notes | — | Hover over a highlighted property name | — |
Tips
- Grid lines sit between cells, so a garden with five columns has six vertical lines. Count lines, not boxes.
- Negative numbers count from the far side. A value of -1 always means the last line, which is handy when you do not want to count.
- Use span when you know the size but not the end line. A rule like grid-column-end: span 2 stretches the patch two cells past its starting line.
- The grid-area shorthand packs four numbers split by slashes. The two starting lines come first, rows then columns, followed by the two ending lines.
- On template levels, fr units split the leftover space into shares, while pixel and percent values stay fixed.
If you like CSS Grid Carrot Patch, try these
CSS DinerStart with selectors before grids: type the CSS that picks the right plates and snacks off a table.
Learn Git BranchingLearning real developer tools through levels continues with git commands that reshape an animated commit tree.
Questions
Does CSS Grid Carrot Patch save my answers?
Yes. Your level, the code you typed and the list of solved levels stay in your browser. To start over, open the level list and choose Reset.
What does CSS Grid Carrot Patch teach?
It covers the main properties of CSS grid layout, including placing items by line number, spanning cells, reordering items and defining columns and rows on the container.
Is my answer wrong if it differs from the hint?
No. The game checks where the water and poison end up, not the exact text, so any valid CSS that covers the right cells passes.
More like this: all puzzle games · every game A–Z
