Grid Garden

? Level 1 of 28 ? ?

12345678910111213141516171819202122232425262728

Reset

Grid Garden

Welcome to Grid Garden, where you write CSS code to grow your carrot garden! Water only the areas that have carrots by using the grid-column-start property.

For example, grid-column-start: 3; will water the area starting at the 3rd vertical grid line, which is another way of saying the 3rd vertical border from the left in the grid.

1
2
3
4
5
6
7
8
9
10
11
12
13
14

#garden { display: grid; grid-template-columns: 20% 20% 20% 20% 20%; grid-template-rows: 20% 20% 20% 20% 20%;}#water {

}

Oh no, Grid Garden doesn't work on this browser. It requires a browser that supports CSS grid, such as the latest version of Firefox, Chrome, or Safari. Use one of those to get gardening!

Tweet Follow @thomashpark

Grid Garden is created by Thomas Park · GitHub · Twitter · English English Fran?ais Português Polski Русский