Let's get Griddy with it

CSS GRID.

Learn CSS Grid with Wes Bos in 25 pretty good videos

From fundamentals to Real World in about 4 hours.

My Account โ†’

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.

Hey, I'm Wes Bos

Wes Bos

Meet Wes Bos

Wes Bos is a Full Stack Developer, Speaker and Teacher from Canada. He is a course creator, works as an independent web developer and is the co-host of Syntax - a popular web development podcast. Wes has taught over 500 students in 200+ classes and spoken at dozens of conferences around the world. Wes wrote his own bio in the third person for some reason.

Wes is the author of React For Beginners, Advanced React and GraphQL, ES6 for Everyone and Learn Node which together have sold over 55,000 copies. He is also the author of JavaScript30.com, CSSGrid.io, Flexbox.io and Command Line Power User, a set of free video series. 300,000 people have taken at least one of Wes' free video courses.

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?! {{insert hipster slight or IE joke Here}}

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 165,215 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.

Thanks!

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