CSS Grid Layout learning resources.

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?

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. 😎

Build with Gatsby. Hosted on Netlify. The code is open source and available at Github.

© Aditya Rao - 2020