8 Free CSS Grid learning resources for 2018

Find out which are the 8 best free CSS Grid courses that you can follow in 2018 to learn and master the subject faster and create amazing and responsive layouts.

8 Free CSS Grid learning resources for 2018

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

  1. Learn CSS Grid on Scrimba
  2. CSS Grid Course by Wes Bos
  3. Introduction to CSS Grid Layout on Mozilla
  4. Learn CSS Grid
  5. Grid Garden
  6. CSS Grid Essentials on Codecademy
  7. Complete Guide to Grid from CSS Tricks
  8. The Complete Guide to CSS Grid on Tuts+
  9. Grid by Example
  10. Other Great (Bonus) Resources

Learn CSS Grid for free on Scrimba

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.

Check it Out

CSS Grid Couse by Wes Bos

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.

Check it Out

Introduction to CSS Grid Layout on Mozilla

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.

Check it Out

Learn CSS Grid

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.

Check it Out

Grid Garden Game by Thomas Park

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.

Check it Out

CSS Grid Essentials on Codecademy

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.

Check it Out

Complete Guide to Grid on CSS Tricks

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!

Check it Out

The Complete Guide to CSS Grid on Tuts+

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.

Check it Out

Grid by Example

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!

Check it Out

Other Great Resources

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.

Catalin Vasile

Catalin Vasile

Catalin is a design focused engineer and founder of DesignRevision. When he’s not working on a project, he likes to read, watch movies and take long hikes.

πŸ€” What do you think?

Introducing

Shards Dashboard Pro

A premium & high-quality Bootstrap 4 admin dashboard template pack.

Here's a 10% discount code! DR10OFF Check it Out