Learning Grid & Flexbox with Chris Coyier & Kyle Simpson

Kyle is a JavaScript guy. He knows a ton about the web, and plenty about CSS too, but isn't as up-to-date on modern CSS layout tools like flexbox and grid. We didn't go from 0 to 100 here, but we did have a great chat about modern layout while live coding and we chatted through layout situations.
Along the way, we let the VS Code extension TabNine see what it could do to help us write CSS.

[@swyxTV]

two of my webdev heroes!! time for You Don't Know CSS??

[@Maximum_Dev]

0:00 - Intro 1:58 - Boilerplate HTML viewport meta tag explained 6:44 - Chris explains the demo setup 9:09 - CSS Grid Intro 12:24 - Similarities of the grid and table-based layouts 13:36 - The Evils of table-based layouts 14:09 - Quick Flexbox demo 16:44 - Flex-basis, flex-shrink, flex-grow deep dive 18:05 - Content width and Inherent size 22:21 - Basic grid demo 25:25 - Inline vs inline-block 26:54 - Let's build a card with CSS Grid 32:14 - Grid template columns and fr units explained 34:03 - Grid sizing vs box-sizing 38:00 - Back to building the card 40:09 - Nesting flexbox inside grid 42:00 - Using flex-wrap 42:57 - Using flex-direction 45:10 - Margin auto trick. (Must watch) 45:42 - Logical axis properties 47:28 - How you might make the card responsive 49:02 - Using justify-content and how to remember what it does 53:46 - Using minmax() 58:49 - Wrapping up Thanks for doing this, I hope you make more videos with Kyle in the future. It was great watching you solve the problems in multiple ways and discussing the trade-offs of each decision Cheers!

[@ChrisCoyier]

Thank you!

[@Maximum_Dev]

You bet man, thanks for the great content!

[@matthiaskohler9615]

Wish the author takes the time to copy paste that into the description so we see those chapters in the video itself to further improve this awesome video

[@justyna6134]

You both are sooo coool, I like when Kyle is asking the questions that have so obvious answer but Chris is replaying to him showing the interesting tricks - very great idea to make this type of meeting :)

[@ElLevidente]

It's so interesting to me to see that Kyle doesn't know a lot of this stuff that I take for granted. Makes me feel less bad about still sucking at JavaScript, everyone has their strengths and weaknesses.

[@PrabhjitSingh1990]

Thanks, Chris, for this wonderful explanation regarding Grid and Flexbox with examples.

[@sdumo59]

Please this was fun we need more of this

[@alexpanteli3651]

Greetings from Cyprus. Great Tutorial. Keep it up mate

[@lenientliu6080]

Very interesting format, learned a lot.

[@abahiduh3246]

Our web gurus Chris-css n Kyle-js

[@DevMadeEasy]

Wow, what an incredible content; thank you so much for sharing it.

[@mdyeamin3553]

yas sir, You feel much better today

[@abahiduh3246]

Am bless.... great opportunity

[@TechSnazzy]

This is answering some questions I have had for a long time. Thank you! Also, what is the drawing tool you are using?

[@carterjm]

Chris, another great video! I love it.

[@yusufgul4458]

Another perfect video, thx for everything.

[@msnataliamilk]

great! i love it! i just found your site, and i know i will be back to web and to yt chanel. learned a lot! :)

[@juancruzsadone413]

which tool did you use to size at 14:41 ?

[@sageeconway4586]

Great Video! Thanks!

[@jimshtepa5423]

Hello Chris, this is another good video after I watched your conversation with Stackbit founder. A quick question, what tool did you use for wireframe design in this video? is it part of chrome?

[@danh27]

I believe it's Cleanshot X

[@jimshtepa5423]

@@danh27 Cool, thank you

[@kicba]

What is this app for drawing mockups?

[@kamilc.5271]

Great vid! Thx!

[@farmville_invite]

But the question is... does it wrap?

[@Mahdi-l5e9j]

thanks

[@AdamArgyleInk]

😍

[@yanhuan1]

Same with Kyle, not familiar with CSS, haha