districtw
districtw
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
But it works like charm. thumbup
24 replies
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
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];
24 replies
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
Now just need to make it responsive
24 replies
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
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))
24 replies
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
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))
24 replies
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
https://codepen.io/Ebeldev/pen/dyrOVRy
24 replies
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
After a few tries, I have come to be able to do it but with some subgrids.
24 replies
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
@Kevin Thanks ,, i'll take a closer look tonight
24 replies
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
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.
24 replies
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
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];
24 replies
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
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 ?
24 replies
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
I'm not sure i understand what you say
24 replies