CSS Grid has been around in the web front end development space for a while now. However, up until fairly recently it wasn’t supported across the majority of today’s popular web browsers. Well this has changed my friends and it’s time to invest some hours into learning CSS Grid.
What is it?
The elements of a website are typically defined in the HTML of the page. CSS is used to style and layout those elements beautifully. CSS Grid provides an intuitive syntax which can be used to tackle some of the most infuriating challenges that come with this styling/layout responsibility.
Why do I care?
Before CSS Grid blessed us with its presence, we were used to laying out website elements using Flexbox. Before that… well, let’s forget about the past and focus on the here and now! This is not to say that Grid should/will replace the use of Flexbox in our applications. Actually, they work quiet well together.
CSS Grid establishes a logical representation of a grid consisting of rows and columns together in the DOM. If you’ve ever had the pleasure of working with HTML table elements and developing the logical representation of a column given a dynamic table structure then you’d understand one of the fundamental challenges that is solved with CSS Grid. This new tech also alleviates headaches caused by using margins to space out your elements, dynamic element layout, elements with relative width/height, responsive design and much more.
What’s the best way to learn this?
There are a few really great resources out there for quickly learning CSS Grid. For starters, you should download the Mozilla Firefox browser because the native CSS Grid development tools are the best out there right now.
I would then suggest checking out Wes Bos’ free course on the subject. Wes isn’t charging anything for the course because Mozilla paid him for the time it took him to create it. In the course Wes does a great job of breaking down the fundamentals and shows you some of the awesome Firefox dev tooling for CSS Grid. Also, make sure to bookmark the CSS Tricks cheat sheet which can prove helpful for specific use case analysis.