CSS Grid Layout learning resources.

October 22, 2017

A few weeks ago I came across this post on Slack Engineering Blog. It's about Slack rebuilding slack.com (their marketing website) using CSS Grids. CSS Grid layout is a two-dimensional layout system. It allows you to layout content vertically and horizontally with ease. It also allows you change the position of contents within the grid without breaking the layout. No need use floats and clearfix for layout anymore. 😍

Now I have been avoiding learning CSS Grids as I thought it will take some time before it gets implemented in all major browsers. With Microsoft implementing CSS Grids Layout in Edge 16 in its October 17th, 2017 update, we now have all major browsers ready to handle this specification.

Where do I start?

My first stop to learn about CSS Grids was MDN. 😉
In the external resources section there is this collection of Grid layout examples from Jen Simmons.
Here I found a link to this excellent post by Jen Simmons with a list of resources to learn CSS Grids.
Which led me to Grid by Example, a fantastic website by Rachel Andrew. Rachel Andrew has been working with CSS Grid specification for last four years and most of whats out there about CSS Grids is by her. This is the only resource you'll ever need for anything relating CSS Grid Layout.

I'm planning to redesign this website and add accessibility support over next few weeks. This seems like a good time to incorporate CSS grids (with fallbacks) on this website. 😎