My margins are collapsing with this alternative to container and wrapper classes
Has anyone tried this yet? https://discord.com/channels/436251713830125568/551066863266693130/1172179877722595469
I'm kicking the wheels on it since yesterday on a new project and it's working great with a full-width with any content inside not imposing it's own layout. But as soon as I:
1. add a div with it's own flex/grid (like this H1 in the hero banner) it breaks out to full-width. I know the H1 is a block element and takes up 100% width by default but that should be 100% of the intrinsic container here I would think still.
2. try to put a breakout inside of a full-width and the same thing happens.
10 Replies
I've been playing with the method prior to his video and love it. Helps if you make a codepen or similar so we can see how you have things setup.
Hi @b1mind Thanks and comforting to know it's been successful for you as I really want to give it a go. I made a quick CodePen, somehow the top-ctas section is getting scrunched there, maybe the missing images I don't know. But the main points are still illustrated I think with the:
- .contact__ctas breakout within full-width bleeding to edge
- hero-banner full-width content not honouring the padding-inline when the viewport is scrunched down to mobile.
https://codepen.io/sirshanksalot/pen/GRzYMYr
because you have to give it direction still.
You have the parent with class full-width but never tell the child how to live.
That's just elegantly stupid of me 🙂 of course only the children are being effected, not the grand-children. This is a scenario that wasn't covered in the video so I just blindly forged ahead.Thanks so much for pointing that out @b1mind
new concept but yea you get it and now you won't forget it haha 😄
I saw you were inheriting too which is something you can also pass down to the grid-column
like if you have a double full* 😄 just something I been thinking about.
had me thinking maybe just give the full class it by defaults so if its a child of another full to take the full xD if that makes sense 🤪
needs to play with subgrid some more now though.
right, I can see the inherit can be a bit overbearing, or 'expensive', if you find yourself overriding it more than not, and as you pointed out, you can manually apply the named space to the grid-column within.
indeed subgrid I need to start wrapping my head around as well, the container queries. ooh boy!
What’s the difference bw using
grid-template-columns: inherit and grid-template-columns: subgrid?I ask this same thing 😂
I started using inherit waiting for subgrid and was like 🫠🤔