CSS Grid is a two-dimensional system that allows web developers to easily create responsive web design layouts in a more consistent and semantic way.
Lately, flexbox has been the go-to solution for structuring layouts for web developers. However, CSS Grid gains more traction and will soon take its place in popularity considering how powerful it is and how many advantages it has.
This doesn’t mean that Flexbox will be completely replaced, on the contrary, they will complement each other.
🤔 Ok, but what’s so cool about CSS Grid?
- Versatility: Web developers will find it more flexible to control and build layouts in a more semantic way given the amount of flexibility over both rows and columns.
- Responsiveness: CSS Grid will take a lot of the pain out of building responsive web layouts that adapt to various viewports.
- Complex structures: CSS grid provides all the native tools required to build various types of creative layout structures (eg. broken grids, etc) in a simple and effective manner.
Being such an effective layout structuring solution, the latest versions of all major browsers including Chrome, Firefox, Opera, Internet Explorer have added support for CSS Grid.
In this article, I’ll highlight some of the best courses and tutorials that you can use to level up your CSS Grid skills. Let’s get started! 🎉
Table of Contents
- Learn CSS Grid on Scrimba
- CSS Grid Course by Wes Bos
- Introduction to CSS Grid Layout on Mozilla
- Learn CSS Grid
- Grid Garden
- CSS Grid Essentials on Codecademy
- Complete Guide to Grid from CSS Tricks
- The Complete Guide to CSS Grid on Tuts+
- Grid by Example
- Other Great (Bonus) Resources
1. Learn CSS Grid on Scrimba
Looking for an interactive experience? If you’re the type who gets bored quickly, you should definitely follow Per Harald Borgen’s course on Scrimba where he covers both the fundamental concepts and advanced features of CSS Grid.
Throughout the course, you will build a website layout, a responsive image grid and learn some useful tips & tricks on how to create article layouts using more advanced concepts. Oh yeah, you’ll get to do all of this in less than one hour.
2. CSS Grid Course by Wes Bos
Wes Bos has put up a thorough 4-hour course on CSS Grid that will take you from an absolute beginner to master in exactly 25 videos that you can easily binge.
3. Introduction to CSS Grid Layout on Mozilla
This amazing short guide by Mozilla covers both the basics and advanced concepts of CSS Grid in a well written and engaging course. The engaging visual representations and clear-cut explanations make it a really great resource for learning CSS Grid in just under a few hours.
4. Learn CSS Grid
Jonathan Suh compiled everything you need to know about CSS Grid in a thorough one-page article that you can easily bookmark and use as a cheat-sheet. All examples are explained in simple terms and accompanied by visual examples and the table of contents is broken down in some of the most important aspects of CSS grid so that you can easily navigate between sections.
5. Grid Garden
The learning process is most effective when it’s fun. Thomas Park clearly understands this as he created a game called Grid Garden where you have to write CSS code to grow a carrot garden.
The game is beautifully designed and takes you through 28 sections that are not only fun but provide you with the core concepts of using CSS Grid.
6. CSS Grid Essentials on Codecademy
The CSS Grid Essentials course on Codecademy is another interactive and exercise-driven tutorial to help you get your feet wet using the layout system. The course is broken down into 13 major sections that will take you from the basics of how to create a grid to more advanced topic like how grid rows, columns and areas work.
7. Complete Guide to Grid from CSS Tricks
The Complete Guide to Grid on CSS Tricks is a comprehensive resource created by Chris House. The entire guide is filled with well-defined examples and clear illustrations of all the CSS Grid features. Make sure you check it out!
8. The Complete Guide to CSS Grid on Tuts+
The Complete Guide to CSS Grid is a collection of tutorials covering the basics, advanced topics and more advanced tutorials with a project-based hands-on approach.
9. (Bonus!) Grid by Example
Managed by Rachel Andrew, Grid by Example is more of a “grab and go” reference website filled with plenty of popular layout examples and information on how the CSS Grid works. Make sure you bookmark it!
Other Great Resources
- 📹CSS Grid in 45 Minutes (Awesome talk by Wes Bos)
- 📹Learn the CSS Grid by Example (The New CSS Grid Tutorial)
- 🗒CSS Grid Playground
- 🗒Case Study: My First Practical CSS Grid Layout
- 🗒Practical CSS Grid: Adding Grid to an Existing Design
Loved this roundup? Let your friends know about it!
🔥 Check out the best CSS Grid learning resources for 2018 #css #cssgrid Click To Tweet
Conclusion
CSS Grid is still in its infancy stage and now it’s the time to put in the work and learn more about how it works and how to use it before it becomes the de-facto standard for building layouts.
What’s your favorite CSS Grid course? Did I miss anything? Let me know your thoughts in the comments section below.
🤔 What do you think?