Grid help
https://codepen.io/Miss-Fox/pen/wvbpdRd
relevant styles in ' @layer help'
So i run into this issue fairly often but not always.... I am declaring my columns as the size i want them to be 30ch 3em 55ch respectively. but the min function isdoing its thing saying which is smaller 100% or 30ch. which leads me to wonder, why is my grid exactly the size of the childrens implicit content as a default? i thought it was the flex on the body but even if i take that off , its still the implicit size.
How to i make my columns the size i want them to be until they start running out of room? if i give my parent grid .wrap a width of 100%, then the children use the max 1fr and grow to fill the screen.
16 Replies
you have a syntax error on your
.wrap
you have this:
what you might want is this:
you also have this:
on the :root
that will affect the size of the grid
from what i can see, you want a grid that's about 540px + 990px + 3em wide
no, i was wrong
for this exact example, the 0 is 9.5px, so, the grid will be 285px + 3em + 522.5pxAh thanks for catching that comma!
I def want it to be responsive though and don't want to just hardcode a fixed size. The problem I'm finding is the minmax cells are either too big (if I give .wrap and inline-size of 100%, the first and last cells take up all the space because of the 1fr) or they are jist their max-content size instead of the 30ch /55ch (which yes will change a bit bc of the clamp). This will end up in a media query for large screens , haven't measured but prob above 600px .
It's just a common mistake I seem to make to the point where I end up putting the width on the .cards like
inline-size: min(100%, 30ch + 3em); and them just using auto for the grid cells.
But I know that the point of grid is controlling the size of the children so really teying to figure out my block here. It works if I need equal columns with auto-fit but once I'm trying to do this thing, and keep it responsive, I always run into issues. Do I just need to set a width on the grid wrapper itself to get the children to be the size i want? Like inline-size: min(100%, 30ch + 55ch + 3em)? Otherwise they are too big or too small
ive altered the pen but this is what ended up working. i guess ive just trained myself that the max of the minmax should always be 1fr but if ichange that, it seems to break my min() function so the cells dont shrink to 100%. i tried setting min(100%, 0) but that was invalid, prob because 0 will always be smaller
still not sure why 1fr breaks it thoughboth 1fr and 100% are relative units
they completely depend on the size of the parent
100% will never be less than 1fr
and 1fr can be between 0px to 100%, which makes things super complicated
even using ch makes things EXTREMELLY complicated, because now the grid relies on the font and font size of ALL parents that have a font set, or the
:root
for your specific font for that specific element, it seems that 1ch = 9.5pxlets take the ch unit out of it then and use px;
this doesnt work either. How would you declare it to get a behavior that at its largest its 300px/500px and at its smallest, its mincontent but is flexible as the screen shrinks and doesnt overflow?
have you tried to use
clamp? it's a bit weird for grid, but maybe it may worki havent. do you think you can use min() inside a clamp()? we have min=min-content, preferrred 100%, and max 300px/500px respectively. so far my values are either not shrinking /are overflowing, or theyre shrinking but wont get past max-content to make them larger
why would you want to use min inside clamp?
To choose the smaller of two values for the minimum. Please show me how you would set up this clamp , I’m not having any luck , with or without the min()
i don't understand what's the intended outcome of this
like, how exactly do you want this to look like
My goal is the screenshots I sent; at the largest be about 300px/500px respectively, and be able shrink down responsively to the smallest size in the screenshot
so,
minmax() is different from min() or max(). Those two evaluate all the sizes you give it, and out of all the ones you've provided, it picks either the biggest or smallest.
minmax() on the otherhand, sees the first value as the smallest, and the second as the biggest.
We often use minmax(fixed-size, 1fr) because it sets a minimum, but allows it to grow if there is space available, but that's not the only way we can use it.
In this case, we could do this, and it would work:
Or, if you want it to be more flexible:
thanks, i switched to px because epic was helping me and we were getting lost in the details of the clamp and the ch unit changing. My original declaration was this because i definately want it to be flexible:
However this wasnt working the way i thought it should. It was either stuck at min-content or it took up the rest of the screen (1fr). The behaviour im looking for is what this produces or see it in action but im not sure why as 2px is always gonna be smaller than 100%; i think i was trained that i always need to include 1fr as the 'max' in minmax :
at their largest i want them to be 30ch + 3em and 55ch + 3em respectively;
at their smallest be min-content and be flexible in bw
I think this does that
The min(100%, 2px) is a funny one, tbh, and I'm not sure why it's using the percentage instead of the
2px. Made me go down a bit of a rabbit hole to figure this out, and I don't get it, but it sounds like it has to do with this, per the spec:
<percentage> values are relative to the inner inline size of the grid container in column grid tracks, and the inner block size of the grid container in row grid tracks. If the size of the grid container depends on the size of its tracks, then the <percentage> must be treated as auto, for the purpose of calculating the intrinsic sizes of the grid container and then resolve against that resulting grid container size for the purpose of laying out the grid and its items.That's talking about using percentage in a
minmax(), and feels like what's happening here (if I'm understanding that correctly, which I might not be 😅), because it's acting like auto would. Now, why it's doing that, instead of using the 2px is still something I can't figure out.
And actually, yeah, this would work too, auto as a min value is basically the same as min-content:
oh crap, i forgot to answer this
i was thinking something different but ... i forgot what i had in mind at the time >.>
the only thing i would say is to avoid the 30ch and 55ch, as the value for that is very tricky to understand and will change with the font and font-size, which can cause issues
oh interesting... with both min-content and auto i thought it would have a hard switch at some point (like changing flex-direction from row to column) but for its width and not maintain a fluidity in between... like i thought it would be its 30ch/55ch respectively until the window got to small and then would just transition to its min-content not gradually get there but obviously im not fully grasping minmax.
oh wow thanks for looking into the 100% vs 2px behaviour; that had me thoroughly puzzled. glad im not the only one. very curious!! minmax, youre a wild one!!!
thanks for your help an attention; grid has some behaviours that really confuse me still but boy am i grateful for it and auto-fit!
P.S. next time youre hanging in the HELP section, it seems no one else but you could answer this for me? https://discord.com/channels/436251713830125568/1246440412206600245/1246440412206600245