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

Most web developers know a Flexbox Froggy game that teaches we a basis of flexbox from scratch. This giveaway diversion went viral and it’s still impossibly profitable for training people how to code with flexbox.

Well, a same developer who done that diversion has a formula new game called Grid Garden.

This diversion works in a identical demeanour though teaches we how to formula CSS grids. It’s a comparatively new underline though it’s catching on fast and Grid Garden is simply a best approach to learn.

Grid Garden training appGrid Garden training app

Everything in Grid Garden follows a similar training style as Flexbox Froggy. It was combined by a same developer, Thomas Park, so we can design a identical turn of problem and usability.

By default, we start during turn one with a total of 28 levels from start to finish. You can always skip levels if we consider any are too hard, though we find it’s always good to work by them all only as a refresher.

grid garden of 28 levelsgrid garden of 28 levels

If we have no thought how grid-related properties work you’ll find yourself Googling a lot of words. The CSS grid blueprint is a totally new module with a possess syntax and features.

I rarely suggest toying around with Grid Garden whenever we get a chance. It’s most a CSS developer’s playground for training and investigate all a several grid blueprint properties.

I can’t contend this diversion will make we an consultant in CSS grids. Only building projects and practicing a lot can move we to an consultant level. But, Grid Garden is a fun approach to get started but all a common highlight that goes into training something new.

The whole plan is totally giveaway and open-sourced on GitHub if we wanna download it locally to investigate or expand. You can also share your thoughts with a creator on Twitter @thomashpark.

Add Comment