The secret to mastering CSS layouts

🔗 Links

⌚ Timestamps
00:00 - Introduction
00:53 - Relationship between parents and children width and height
04:32 - Child’s margin impacting the parent
08:27 - Flex and grid’s influence on the relationships between siblings

#css

--

Come hang out with other dev's in my Discord Community

Keep up to date with everything I'm up to

Come hang out with me live every Monday on Twitch!

---

Help support my channel

---

---

I'm on some other places on the internet too!

If you'd like a behind the scenes and previews of what's coming up on my YouTube channel, make sure to follow me on Instagram and Twitter.

---

And whatever you do, don't forget to keep on making your corner of the internet just a little bit more awesome!

[whatthefunction]

"The children are being forced to live inside those cells"... you said it

[akshaymondal]

You don't have any idea how much you have helped me with your videos.. I literally was on the notch of giving up css.. but now .. this is the one of those things about which I feel confident . Thanks a lot sir . Kudos to you.

[RealCaptainAwesome]

Whenever I question my choices that lead to me becoming a back end engineer, I watch one of your wizardry videos and feel much better.

[pkunzel]

"They don't live in isolation, they live in relation"
That is the biggest challenge I have when teaching CSS.

Amazing video!

[BinaryStar]

Notes to myself:
-Parent dictates children's width. Children dictate height... unless you set height and possibly cause overflow issues.
-A simple wrapper with max-width and margin-inline: auto.
-Collapsing margins - child's margins can reach outside parent (margins merge to parent). This can be prevented by removing margins from child, adding padding to parent or changing to a formatting context where collapsing margins don't exist (such as flow-root, flex and grid).
-Using flex you can have even sized columns with flex: 1. But if columns have varying sized paddings, they are not even sized. Grid on the other hand takes padding into account when calculating size and therefore columns are even sized if they are set to be even.

[bumbleguppy]

Just like the best cooking videos, showing the underlying "why" instead of simply specifying "how" imparts an understanding that can be applied to any recipe and not just the one you're working on. Thank you for your style of video.

[aarondeimund]

Thanks for making these! I'm a developer in the I.T. department of a manufacturing company and the only one on my team with a good grasp of css, largely because of your videos. Thanks for helping me make my corner of the internet a little more awesome!

[IamPetrus]

Hey Kevin, I was having issues with a very basic relationship between a parent-child situation kept with flexbox. Your video came up here and then I understood what was going on after a terrible feeling of frustration. And man, you named them all!
Gracias Kevin!!!

[tk]

The last tip, where flex let more control to child and/or siblings, and grid allows more control to the parent was so illuminating. I know now how to initiate a layout based on my content.

[goannacs]

I learn HTML and CSS.
I even attend some kind of online school and Udemy.
But you are the only one who really helps me understand every bit.
You have such a calming and logical way to explain things. You just feel secure about it afterwards. It's strange. It's like you were born for this stuff haha 😆

[tdematos]

The way you understand how everything comes together is unbelievably easy to understand! Definitely earned a new subscriber! 🙏

[o_o_f_c_i]

I have no money to buy premium courses so I day I found your channel and you help me a lot . I just become a frontend developer or css expert because of you and designs course YouTube channel Thank a lot

[francopdx]

Thank you for all the tips! The differences between flex and grid in regard to parent vs child influence was very enlightening! I've been using flex for almost a couple years, but it was just a few months ago that I really started dabbling with grid.

[ilovelctr]

Omg, this is so splendid! This is the first time I've watched your video, and I immediately subscribed. Your explanation makes utter sense out of CSS, whereas I'd say CSS seems to make no sense for most devs. Thank you so much for sharing your knowledge.

[the-real-tridder]

great information mate, really apprecite the time you take to explain these really important concepts. The importance of relationships is so underrated when most people discuss css.

[atr]

I basically started learning about CSS from your videos. And time to time I hear people say “I hate css”, “it is so frustrating” etc… Man, I don’t understand them… Is it because you, Kevin, makes CSS look so easy, simple and lovely? I don’t have any other explanation:)

[WadieGamer]

I've been following your videos for almost a year and I want to thank you so much for making my CSS learning much better.

[Spreadlove]

This is the exact question I've been wondering about for so long -- just how everything fits together and how relationships play out. Bought your CSS Demystified course just now. Excited to get a firm understanding of the fundamentals.

[andrewferguson]

Thank you for the clear, and quick review this topic. I always learn something, and that was certainly the case here. Just yesterday I was working with flex and grid and got myself thoroughly confused. Thanks to this refresher, I better understand what was confounding me so much yesterday.

[joshhoffer]

kevin im falling madly inlove with you ... because you always get me out of the bind, css will never be close to my heart...