Learn CSS Grid Layout (The Fun Way) with Grid Garden

By Jake Rocheleau. in Coding. Updated on April 9, 2018.

Most web developers know the Flexbox Froggy game that teaches you the basics of flexbox from scratch. This free game went viral and it’s still incredibly valuable for teaching people how to code with flexbox.

Well, the same developer who made that game has a brand new game called Grid Garden.

This game works in a similar manner but teaches you how to code CSS grids. It’s a relatively new feature but it’s catching on fast and Grid Garden is easily the best way to learn.

Everything in Grid Garden follows a similar teaching style as Flexbox Froggy. It was created by the same developer, Thomas Park, so you can expect a similar level of difficulty and usability.

By default, you start at level one with a total of 28 levels from start to finish. You can always skip levels if you think any are too hard, but I find it’s always good to work through them all just as a refresher.

If you have no idea how grid-related properties work you’ll find yourself Googling a lot of words. The CSS grid layout is a totally new module with its own syntax and features.

I highly recommend toying around with Grid Garden whenever you get the chance. It’s practically a CSS developer’s playground for learning and studying all the various grid layout properties.

I can’t say this game will make you an expert in CSS grids. Only building projects and practicing a lot can bring you to an expert level. But, Grid Garden is a fun way to get started without all the usual stress that goes into learning something new.

The entire project is totally free and open-sourced on GitHub if you wanna download it locally to study or expand. You can also share your thoughts with the creator on Twitter @thomashpark.

Read Also: Guide to CSS Grid Layout Fr Unit