Learn How CSS Grid Properties Work With Griddy.io

If you keep up with web design tech then you should know about CSS grids. These properties are new additions to the CSS3 format and they’re quickly becoming a developer’s best friend.

We recently covered a fun game to help you learn the CSS grid properties, but games don’t always teach practical ideas. That’s where Griddy might be more useful.

This free webapp lets you customize grids in real time and updates live snippets on the page. You can mess with your own custom grid by defining columns, gutters, and margins, and restructure the page to learn how grid properties work.

Griddy is actually a free learning tool made for frontend developers who wanna understand more about CSS grids.

With this webapp you can add new items into the grid, remove other items, and resize them to fit any layout you want.

The webapp has different sections with different input fields for editing grid properties. These let you reformat the grid rows/columns and they teach you exactly what you’re doing along the way.

You can define column gaps, align grid items, and play with justification settings – all through these form fields. Whenever you make a change it’ll auto-update the preview and the small code snippet underneath.

This way you can just copy and paste the CSS into your own stylesheet if you wanna mess with it further. Pretty cool!

Griddy may not be as fun as Grid Garden but Griddy is a practical way to learn and visually understand how the CSS grid properties affect page elements.

To play around with it just visit the Griddy homepage. You can also share your thoughts or questions with the creator on Twitter @drewisthe.