width 100% is not respecting the gap property?
Hey Guys, Im trying to learn display:grid, i set a gap of 3.5rem, the cards i have have a child div that i set to width 100%, but it seems like the 100% is not respecting the gap, and its pushing all the way to the next div? can someone point me in the right direction?
6 Replies
can you put it in a codpen?
I'm going to assume its cause your parent has a strict width so the children can't grow
yeah let me do that one sec
Some of the assets are missing, but it seems like the issue is still the same?
So this has to do with
box-sizing and the box model
slap * { box-sizing: border-box;} at the top of your css its good to always have. To learn more check out Kevins videos on itKevin Powell
YouTube
box-sizing: border-box explained
You probably see box-sizing: border-box used all over the place. I use it in my tutorials, it's used in most written and video content I see. In this video, I take a look at what border-box is, and why it's really awesome.
CSS-Tricks article I mentioned in the video: https://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-p...
Got it thanks!