Things I Learned from Grid Garden, A Game for Learning CSS Grid

Just like learning Flexbox, it took me some time to understand the whole picture. Fortunately, there are a lot of resources about CSS Grid for me to learns from. Grid by Example is the best resource to get started in my opinion.

My favorite one though is Grid Garden, from the creator of Flexbox Froggy which is also one of my favorite learning resources about Flexbox too.

Grid Garden: http://cssgridgarden.com/

In short: Grid Garden is a web-based game that you have to fill in some CSS properties or values related to CSS Grid to either water the carrots, or to kill the weed plants.

I played the game twice (at least). Here are what I have learned about CSS Grid from the game Grid Garden, in no particular order.

Note: this list is not a reference or an intro to CSS Grid. Players should read up a bit about CSS Grid if you haven’t.

• Like Flexbox Froggy, there are more than 1 correct answers as long as it gives the required output.
• The basic concept of CSS Grid is Grid Lines. Putting horizontal and vertical grid lines together creates a Grid Layout.
• grid-column-start, grid-row-start, grid-column-end, and grid-row-end use values of grid lines, not grid cells. So saying grid-column-start: 2 means it starts at the 2nd grid line, not the 2nd cell in the grid.
• The value of grid-*-start can be less than grid-*-end . It will then occupy the spaces in between. They can also have negative values which will start counting from the other side instead.
• Using span value is very useful when having more grid lines. Instead of saying where a grid item should start or end, use span to say how many tracks it should span across.
• grid-column is a shorthand property for grid-column-start / grid-column-end . Same goes for grid-row : a shorthand for grid-row-start / grid-row-end .
• grid-area is a shorthand for grid-row-start / grid-column-start / grid-row-end / grid-column-end .
• Using span value is also possible with shorthand properties.
• A grid item can overlap another items. The element that is presented later in HTML code will be placed on the top.
• order property of a grid item has a default value of 0 , not 1 . It works also with a negative value.
• Grid columns and rows don’t have to have the same width and height.
• repeat(times, width) value is very helpful to quickly generate a grid. width value can be in any unit, including the new one: fr .
• fr = fraction of remaining spaces, not the whole width of the grid.
• The 26th question is difficult.

That’s it. Thanks to Codepip, the creator of the 2 games. 😇

My notes .. with weird handwriting (*⁠°ヮ⁠°*)