CSS Grid — Learn all about CSS Grid with Wes Bos in this free video series!


Let’s get Griddy with it

Learn CSS Grid with Wes Bos in 25 pretty good videos

From fundamentals to Real World in about 4 hours.

CSS Grid is a brand new layout system in CSS! It’s not a framework or library – it’s an addition to the language that allows us to quickly create flexible, two dimensional layouts.

We can use it to place, size, align and architect designs that were previously difficult or even impossible with floats or flexbox.

CSS Grid may seem a bit daunting with new syntax and layout ideas, but it’s fairly simple and can be broken down into a handful of powerful concepts that when used together will blow your mind and change the way you create layouts for the web forever.

Ready?! Let’s Learn CSS Grid Together!

Wes, How is this Free!? What’s the Catch?

No catch! A huge thanks to Mozilla Firefox who has sponsored my time to create this course and offer it up for free. Firefox packs some of the best dev tools and in particular their CSS Grid Dev tools make understanding, debugging and visualizing complex grid layouts a snap.

4 Hours×25 Videos

Accessible and ESL friendly! English Captions are provided for every video 😘

Frequently, Questions are Asked.

What font / color scheme / editor / terminal is that?

I answer everything over at wesbos.com/uses. Feel free to tweet me any more questions!

What About Browser Support for Grid? What About IE11?!

You need to read Rachel Andrew’s article over on Smashing Mag. Even if you decide you can’t use it today, I’d recommend still learning it as these older browsers will go away just as quick as grid showed up!

What about Flexbox? Something you did can be done in 1 line less than Grid!

There is an entire video on CSS Grid vs Flexbox. In short, they both do their own thing, but there is also a large amount of overlap in functionality. Watch the video!

I have a question, can I email you?

While I’d absolutely love to help everyone out, there are 18,909 people taking this course and I can’t handle that amount of email. If you are a member of one of my premium classes, you can jump into the #CSSGrid room in our Slack channel.

I lost, deleted or never got my welcome email! What do I do?

Log into your account, or create an account with the same email you used to get the series.

Can I host a meetup / study group? Can I stream these in my classroom? Can I arrange a playing?

Yep yep yep – as long as you do not redistribute the videos you are welcome and encouraged to do this.

Can I re-distribute these and then charge money for them?

I can’t believe I have to make this a FAQ. No, you silly goose.

Will these be on YouTube too?

Yep – over the next few weeks I’ll be dripping them out on my YouTube channel, which you should totally subscribe to.

I found a typo or errata

If it’s a typo on the site, please shoot me an email here. If it’s a correction in the code, you can submit those via GitHub! Please see the above FAQ if you found a better way.


A huge thanks to everyone who has helped make the course a reality.

  • Rachel Andrew and Jen Simmons for their work and contributions over the past several years on CSS Grid. Their work is the reason why the CSS Grid spec is so rock solid today and have been speaking and writing about CSS grid long before most of us had even heard of it. I specifically found lots of help from Rachel’s Grid AMA on Github.
  • Benjamin De Cock for his many grid related tweets and insights
  • Chris Coyier’s CSS Grid Guide is the ultimate CSS Grid reference – we use it in this course!
  • Riley Schriner, Mike Henderson, Jim Arment, Julian Nicholls, Ben Hong and everyone else who reviewed this content before it launched to the masses. Your finessing of the content is much appreciated!
  • Philipp Rudloff for showing me the sidebar « tip » design pattern we use in video 25
  • Dhanish Gajjar for designing all the cover art thumbnails


via CSS Grid https://cssgrid.io

January 19, 2018 at 10:49AM