Learning CSS Grid with Grid Garden

Grid Garden

Grid Garden Screenshot

I’m pleased to announce Grid Garden, a sequel to Flexbox Froggy. This time, you’ll learn about CSS grid, the hot new layout module, and cultivate a carrot or two in the process.

Grid is cutting edge, with browser support landing just last month. What this means is that you’ll need to update to the latest Firefox, Chrome, or Safari in order to play Grid Garden. So hop to it!

Grid versus Flexbox

If you’re anything like me, you’re thinking to yourself, “We just figured out flexbox, now we have another layout technique?!” But just as position and float will continue to find use, grid and flexbox will coexist and fulfill different purposes based on their strengths.

So what exactly is the difference between grid and flexbox? In a nutshell, flexbox works along one primary dimension, with niceties like wrapping, alignment, and justification thrown in. Grid, on the other hand, works in two dimensions by defining rows and columns. Think table-based positioning, but with a separation of content and presentation.

More concretely, grid is good for laying out macro elements like headers, footers, and sidebars, while flexbox is well-suited to multiples of similar items, like lists of features, testimonials, and navigation links.

Learn More about Grid

My objective with Grid Garden is not to cover every last aspect of CSS grid, but to help players develop an intuition and recognize its potential. Things get left out, like the grid-gap property, grid-auto-columns, and custom naming of grid lines and areas.

Fortunately, there are some excellent resources to fill in the gaps, including Grid by Example, Jen Simmons’s experimentation, and CSS-Trick’s guide. And of course MDN’s comprehensive docs.

CSS grid is powerful and elegant (more so than flexbox), and should quickly become an essential tool in your web development toolkit. But don’t just take my word for it — play Grid Garden and see for yourself.

25 comments Write a comment

  1. This is great!

    There’s a bit of a problem with level 22 though. Based on your instructions, I had to build it three different ways (the first two selected exactly what you specified as well). Perhaps you should make the instructions more clearly specify that you want 0 values for some of the rows? (Not breaking the 50px area into 4 rows?)

  2. Cute ending. ;) One other bit of feedback — I think levels 23 and 24 are a bit tough because you render it showing the 5 x 5 grid to start (when nothing’s defined). It makes you feel like you need to come up with a solution that’s still 5-based.

    Otherwise, great work! A fun way to learn the basics.

  3. Hi Thomas, thanks for creating the grid garden. It’s a good learning resource.

    What’s the correct solution for step 26?

    It looks I solved it with grid-template-rows: repeat(4, 10px) 1fr; but I’m not getting a pass…

    Thanks

  4. Many thanks! for creating wonderful learning space. Had awesome time and great fun, while getting introduced to grids.

  5. Thanks for this great learning tool. A bit of feedback, I found Level 26 too confusing I think because of the pre-existing grid lines? Another thing is that the blue fill resembles water. I thought I had the solution based on the blue fill using 50px 1fr.

  6. Congratulations Thomas, amazing pedagogic work you are doing with Grid Garden and Flexboxfroggy, my students will really appreciate tomorrow!

Leave a Reply