a 50/50 items in the -- no wrapper mindset with css grid
Hi Kevin, i really love the approach of getting rid of container and wrappers, like you showed in this video. https://www.youtube.com/watch?v=c13gpBrnGEw ...
My question using this approach.
How would you make a section have in it two 50% sections that are full-width (meaning one section goes from full-width-start to "content-middle" and the other one goes from "content-middle to full-width end.
In each of those sections, the hero-left section the content is align on the content-start to the "content-middle" and the hero-right section content is align with "content-middle" to content-end
Like theses 2 examples :
Kevin Powell
YouTube
A new approach to container and wrapper classes
The wrapper or container is probably the most common design pattern around, but after coming across an article by Stephanie Eckles looking at how we can use a grid to emulate a container, and have simple breakouts — https://smolcss.dev/#smol-breakout-grid — I had an idea of how we could do this to completely drop the idea of containers, and then...
16 Replies
I think you’d put the pair into the grid as full width and then either flexbox or grid them into position
I'm not sure i understand what you say
You can
flex of the following way:
the parent must be contain display: flex then on children must apply of property flex: 1 1 50%.
Remember that flex is a shorthand the following properties flex-grow, flex-shrink and flex-basis precisely in this order
And how do you align the content inside the div.
The left div, you wanna have it align with the content-start line. ?
The right div, you wanna place it the content-end line ?
i believe that you can use inside parent the
justify-content: space-between
oh i think it was justifay-items: space-betweenYou were right initially, in flex it’s only “justify-content, align-content, and align-items”. Grid has all of them , including “place-X” and “X-self”.
I've been thinking about this too actualy @Js23 - I'd probably make another grid line, so it's something like:
It does mean, for the part between
content-start and left-half-end, you'd need to do something like `calc(var(--content-max-width) / 2), so half ends up in one column, and then the same thing on the other side.
If this doesn't make sense, let me know 😅
If you go all-in with this method, you could come up with a bit of a disasterous looking bit of code that could be really robust though. I'm thinking of building part of an upcoming talk around the idea, lol.
Cause you could have full-width, full-left-only, full-right-only, extra-wide, extra-wide-left-only, extra-wide-right-only, wide, wide-left-only, wide-right-only, narrow, narrow-left-only, narrow-right-only, and so on.Interesting I'll try that tonight.
I did try splitting the content part in 2 and putting a middle line and adjusting the content width accordiagnly (instead of 100%, I have put 50% twice).
But it did not work. For some reason I haven't found yet, the grid just broke.
I really love your approach @Kevin and looking to build a project with it.
I always been a lover of as pure html and css possible and this is a great way to acheive it.
Even if the grid template is a mess, at least the mess is only in one place. Not every where.
Even if the grid template is a mess, at least the mess is only in one place. Not every where.💯 !! That's exactly how I see it. I pasted what you had in codepen (and gave all the custom props some filler values), and it works for me 🤔 Is it possible one of the custom props isn't matching up?
@Kevin Thanks ,, i'll take a closer look tonight
After a few tries, I have come to be able to do it but with some subgrids.
It does work when I put fixed sizes in the grid declarations.
But when I come to changing to the more flexible values with the min function that the layout breaks out.
Ok I got it to work .
I just realised that if I had 2 cols now instead of one I needed to split all values in half too.
Now just need to make it responsive
Still unfortunatly this declaration of grid-template-columns is pretty ugly.
But it works like charm. 
I mean, the point of it is to put it in place so it just works. Who cares what it looks like 😅.
Some people like to complain about readability, but the readability and maintainence come from the easy way to adjust it through custom properties.
It's all clearly labelled which is a good thing and worst case scenario you can include an ASCII diagram to show how each area of content should show
You could also make it wider and show the expected size both at desktop but also mobile sizes as well as if anything shifts
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/Jason Shanks
PYC Therapeutics
Home - PYC Therapeutics
PYC Therapeutics is a clinical-stage biotech company that creates therapies for rare genetic diseases. Our purpose is to change lives.
I would just use flex, if you want to recreate the designs you mentioned. I think you can use flex wrap to make it responsive too