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
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
, and custom naming of grid lines and areas.
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.