Learning Grid & Flexbox with Chris Coyier & Kyle Simpson

[@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