Kevin Powell - Community•10mo ago

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...

14 Replies

Skylark•10mo ago

I think you’d put the pair into the grid as full width and then either flexbox or grid them into position

districtw•10mo ago

I'm not sure i understand what you say

Js23•10mo ago

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

.parent {
  display: flex;
  align-items: center;
}

.parent > * {
  flex: 1 1 50%
}

.parent {
  display: flex;
  align-items: center;
}

.parent > * {
  flex: 1 1 50%
}

districtw•10mo ago

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 ?

Js23•10mo ago

i believe that you can use inside parent the justify-content: space-between oh i think it was justifay-items: space-between

clevermissfox•10mo ago

You 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”.

Kevin Powell•10mo ago

I've been thinking about this too actualy @Js23 - I'd probably make another grid line, so it's something like:

grid-template-columns: [full-start left-half-start] ... [content-start] ... [left-half-end right-half-start] ... [content-end] ... [full-end right-half end];

grid-template-columns: [full-start left-half-start] ... [content-start] ... [left-half-end right-half-start] ... [content-end] ... [full-end right-half end];

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.

districtw•10mo ago

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.

grid-template-columns:
    [full-width-start hero-lt-start]
    minmax(var(--padding-inline), 1fr)
    [breakout-start]
    minmax(0, var(--breakout-size))
    [content-start menu-start]
    min(50% - (var(--padding-inline)), var(--content-max-width))
    [hero-lt-end hero-rt-start]
    min(50% - (var(--padding-inline)), var(--content-max-width))
    [content-end]
    minmax(0, var(--breakout-size))
    [breakout-end menu-end]
    minmax(var(--padding-inline), 1fr)
    [full-width-end hero-rt-end];

grid-template-columns:
    [full-width-start hero-lt-start]
    minmax(var(--padding-inline), 1fr)
    [breakout-start]
    minmax(0, var(--breakout-size))
    [content-start menu-start]
    min(50% - (var(--padding-inline)), var(--content-max-width))
    [hero-lt-end hero-rt-start]
    min(50% - (var(--padding-inline)), var(--content-max-width))
    [content-end]
    minmax(0, var(--breakout-size))
    [breakout-end menu-end]
    minmax(var(--padding-inline), 1fr)
    [full-width-end hero-rt-end];

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.

Kevin Powell•10mo ago

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?

districtw•10mo ago

@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.

districtw•10mo ago

https://codepen.io/Ebeldev/pen/dyrOVRy

Ebeldev

CodePen

Using CSS Grid for layout with no wrappers

...

districtw•10mo ago

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.

min(50% - (var(--padding-inline)), var(--content-max-width))

min(50% - (var(--padding-inline)), var(--content-max-width))

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.

min(50% - (calc(var(--padding-inline)/2)), calc(var(--content-max-width) / 2))

min(50% - (calc(var(--padding-inline)/2)), calc(var(--content-max-width) / 2))

Now just need to make it responsive Still unfortunatly this declaration of grid-template-columns is pretty ugly.

grid-template-columns:
    [full-width-start hero-left-start]
    minmax(var(--padding-inline), 1fr)
    [breakout-start]
    minmax(0, var(--breakout-size))
    [content-start menu-start hero-left-content-start]
    min(
      50% - (calc(var(--padding-inline) / 2)),
      calc(var(--content-max-width) / 2)
    )
    [hero-left-end hero-right-start hero-left-content-end hero-right-content-start]
    min(
      50% - (calc(var(--padding-inline) / 2)),
      calc(var(--content-max-width) / 2)
    )
    [content-end hero-right-content-end]
    minmax(0, var(--breakout-size))
    [breakout-end menu-end]
    minmax(var(--padding-inline), 1fr)
    [full-width-end hero-right-end];

grid-template-columns:
    [full-width-start hero-left-start]
    minmax(var(--padding-inline), 1fr)
    [breakout-start]
    minmax(0, var(--breakout-size))
    [content-start menu-start hero-left-content-start]
    min(
      50% - (calc(var(--padding-inline) / 2)),
      calc(var(--content-max-width) / 2)
    )
    [hero-left-end hero-right-start hero-left-content-end hero-right-content-start]
    min(
      50% - (calc(var(--padding-inline) / 2)),
      calc(var(--content-max-width) / 2)
    )
    [content-end hero-right-content-end]
    minmax(0, var(--breakout-size))
    [breakout-end menu-end]
    minmax(var(--padding-inline), 1fr)
    [full-width-end hero-right-end];

But it works like charm. thumbup

Kevin Powell•10mo ago

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.

Skylark•10mo ago

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

|    |    |    |    |    |    |
|    .    .   hero  .    .    |
.    .    | content |    .    .
.    |    . feature .    |    .
| left content |    .    .    .
.    .    .    | right content|

|    |    |    |    |    |    |
|    .    .   hero  .    .    |
.    .    | content |    .    .
.    |    . feature .    |    .
| left content |    .    .    .
.    .    .    | right content|

You could also make it wider and show the expected size both at desktop but also mobile sizes as well as if anything shifts

Gaming

Programming

a 50/50 items in the -- no wrapper mindset with css grid