J-Sun 🎷☀
J-Sun 🎷☀
PostsComments
KPCKevin Powell - Community
Created by districtw on 1/12/2024 in #front-end
a 50/50 items in the -- no wrapper mindset with css grid
Yes! This is actually really fantastic (the use of subgrid now to solve this). I'm going to apply this to my now 2nd project using the grid-layout-only approach. What I've actually been trying to do is use a similar 50/50 section: - left half staying within the content-start - right half (with a hero image– see the subscribe form at bottom of example site) start in middle, but bleed to full-width-end. Just tested in your codepen and it totally works! Incidentally, can anyone see why my content-grid seems to scale perfectly fine when resizing the viewport. But if you swich to actual mobile device width, it's only taking about 50% of the width? Happening when actually viewing on mobile devices. https://pyctxstg.wpenginepowered.com/
26 replies
KPCKevin Powell - Community
Created by Matt on 12/1/2023 in #front-end
Uniform Nav Bar
@Matt That's the shorthand btw for: 
grid-template-columns: 1fr 1fr 1fr;
grid-template-columns: 1fr 1fr 1fr;
5 replies
KPCKevin Powell - Community
Created by J-Sun 🎷☀ on 12/1/2023 in #front-end
My margins are collapsing with this alternative to container and wrapper classes
indeed subgrid I need to start wrapping my head around as well, the container queries. ooh boy!
17 replies
KPCKevin Powell - Community
Created by J-Sun 🎷☀ on 12/1/2023 in #front-end
My margins are collapsing with this alternative to container and wrapper classes
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.
17 replies
KPCKevin Powell - Community
Created by J-Sun 🎷☀ on 12/1/2023 in #front-end
My margins are collapsing with this alternative to container and wrapper classes
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
17 replies
KPCKevin Powell - Community
Created by Matt on 12/1/2023 in #front-end
Uniform Nav Bar
How about just changing your nav to grid like so? 
nav {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}
nav {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}
5 replies
KPCKevin Powell - Community
Created by J-Sun 🎷☀ on 12/1/2023 in #front-end
My margins are collapsing with this alternative to container and wrapper classes
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
17 replies