Now CSS grid has decent support and graceful progressive fallbacks for non-evergreen browsers, I recently did some research into it’s shiney new features. Rather than try and write my our own spin on “why CSS Grid is great!”, we decided to put together a quick roundup of some of the best resources on the internet for CSS grid.
CSS Grid can be used to create elaborate grid layouts, reminiscent of print layout. Although it’s been around a while now, only recently has it become ready for production sites. MDN recently published a document about CSS Grid Layout and Progressive Enhancement that reflects on this further. With this in mind, now seems like a great time to start getting to grips with CSS Grid.
The actual specification itself for Grid as declared by the W3. This is the best place for the absolutely most up-to-date and nitty gritty on CSS Grid.
This huge set of resources stemmed from Chris House’s A Complete Guide To CSS Grid Layout, both of which he now keeps as up-to-date as possible. This is a great resource to bookmark as a go-to for everything CSS Grid.
Grid Garden is an online game developed by the same guys who created Flex Box Froggy to help you learn the fundamentals of CSS grid. Super good if you (like me) are into a more hands on way of learning.
Learn CSS Grid is (as the title suggests) a great place to learn css grid by @jonsuh. It covers everything from the basics to some of the more advanced features of the tool such as implicitly named grid areas, combining it with box alignment and layering grid items. This is a really good place to start if you’re more of a fan of learning by reading.
Grid by Example by Rachel Andrew is a really good collection of examples, videos and other information to help you learn CSS Grid Layout. The get started guide is a great place to start if you’re new to the tool
Smashing Magazine recently ran a competition to create an interesting, accessible layout with CSS Grid with a bunch of cool prizes (including your very of smashing caricature designed just for you).
They published the winners and runners up last month, which included some really cool implementations of the tool, including a coded up version of The Daily Prophet from Harry Potter.
Smashing Magazine put out an excellent article on progressively enhanced layouts using floats > flex > grid, including a demo website showcasing the features.
On the same note, Mozilla also published a great article which goes into more depth on the issues brought up by using CSS Grid in a production environment.
Inspired by Earth Day, this quick and easy to digest article by Joni Trythall on her experience using CSS grid is a nice visual representation of what can be easily achieved with the tool.
This great article by Jon Yablonski explains what possibilities flex and grid unlock for designers.
Although this article is a little dated now, it still raises (and answers) some common questions about the difference between Flex and Grid.
A super simple and easy-to-use tool to experiment with CSS Grid Layout.
Mozilla have recently added some powerful upgrades to the inspector and box model in Firefox Nightly. The most recent additions can be seen here
A nice playground to mess around with CSS Grid by Mozilla