minFn confusion
CodePen: https://codepen.io/Ceecee-Hart/pen/dyLZrKb
I'm not sure where this extra space is coming from when i set my grid col to auto. I've got the grid,
.main with two direct chhildren, .poster and .content. Poster includes .img-wrap><img> and a row with two buttons. <img> is set to max-width: 100% and .img-wrap{width: min(100%, 30ch);}
If i set my grid col to the same min(100%, 30ch)its fine, but if grid col is set to auto, theres all this extra space in the column. Where is it coming from? Its just empty space in the poster div.
43 Replies
which grid are you talking about?
i may be missing something, but i didnt find any styles for .poster
This is a bit complex, but I'll try 😄
When you have
img { width: min(100%, 30ch), that line is reliant on the space available... which is being defined by the grid.
The auto can't know how big the image is, when the image is reliant on the cell size to know how big it should be.
Because of that, the auto assumes that the image is at 100%, and lets the image figure it out from there... so it keeps that space growing, even though the image has hit it's 30ch.
This is also because the other column is 1fr. 1fr will allow it to take up the extra available space, if there is any... but we have no extra available space...
When working with grid, there are ways to have the children define the column size, but it tend sto be awkward.
Grid is outside in, meaning the parent controls the layout, and the grid items live within that layout, so if you want that min(30ch, 100%), I'd do something like that when I define the column.but isnt that supposed to be defined in the .poster class?
thats the parent of the image holder and the content
or am i missing something stupidly obvious?
So the <img> is set to max width:100% and is held by a wrapper .img-wrap. The img-wrap is getting the width:min(100% ,30ch) if that changes anything.
As you can see in the code, I do have the column set to the same min() as I had set on the .img-wrap but thought since I have a width on the img-wrap auto would work.
Gonna have to read over this a few times as I still don’t get why it creates so much extra space when it’s set to auto.
The grid is on .main, which has two direct children .poster and .content. So poster is a grid child.
oh, i did miss important details
by the way, the image has
max-width: 100%, which will keep the aspect ratioThat’s why I tend to always wrap images in a wrapper so the wrapper can define the size
actually, it works a bit better without
depending on what you want, this is perfectly fine
but as you see: no more white space after, with the
autoCan you link the pen? I don’t see the values you’ve changed
that's because i didn't change anything there, i just removed the
.img-wrap
in f12The image gets too large if I just leave it at 100%
personally, i prefer to do it that way
then, i set the size in the grid
but as kevin explained really nicely,
auto won't work in this case
but at least it doesn't have the weird white spaceRight, I’m just not getting why the min function leaves that space in the first place. It’s in the poster container itself , not the .img-wrap
the
.img-wrap has a widthYes a width of min(100%,30ch)
So shouldn’t poster hug whatever the widest element within it?
depends on how wide the character
0 is.img-wrap is whatever size it is though, if you put an outline on it, you can see its width is represented by the image inside.
no, 30ch means that it is 30x the width of the character
0
in that font, 0 is 10.77px wide, so, 30ch is 30x10.77 = 323px
323 pixels is smaller than the available space when you use auto
therefore, the image will be 323 pixels wide and make that whitespace
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Values_and_Units#:~:text=%220%22%20(ZERO%2C%20U%2B0030)%20glyph <-- referencethis is how i measured how wide the
0 is
actual width - close enough to 323px
in conclusion: the
min function is working as it shouldIf 323px/30ch is smaller than 100% , then shouldn’t it use that value and pass that up as the width of .poster to the main grid for auto value? I thought using auto 1fr, any additional space would be passed to the col 1fr. Instead poster is taking extra space even though the image and image wrap is only 323px.
Sorry I’m feeling very dense about this. I thought I got how min() worked but I just don’t get why there’s extra space within poster for its intrinsic size
no, it shouldn't
But I’ll just keep it as it is and forget auto
it won't know that 100% is smaller
because the 100% relies on the width of the parent
and the parent relies on the width of the child, if it is set to
autoSo how is it deciding how much extra white space to give poster when at auto ?
it's just barfing something that's close enough, which kinda looks like 50%
Hmm okay
Thanks so much for your time and effort
actually
i was wrong
this is what's defining what the
1fr is when you have auto 1fr
auto will take all the space is available, and
1f is the rest
you can't reduce any more than what it is reduced now, so, 1fr is that width, and the auto is the remaining space
the remaining space is wider than 30x the width of 0 (which is ~323px)
therefore, you get the spaceI see
you can see that "dominique", "directors" and "screenwriters" have absolutely no extra space anywhere, and they can't be broken down any smaller
1fr is at min-content and auto is whatever left?
basically, yes
Interesting I always thought it was the other way around, auto was the intrinsic size of the content and 1fr was whatever is left
no, auto is greedy
if it can take a pixel, it will fight hard for that pixel
you can see that "dominique pinon" is on 2 different lines, because it could be made shorter by breaking on the space
if i disable the whitespace wrapping, you can see that the whitespace is shorter
compare with this
I see, thanks I will need to flip my thinking on auto vs fr as I thought the behaviour was opposite
well, 1fr just tries to take 1 part of the space
if you have
1fr 1fr, it's the same as 50% 50%
but if you have 1fr 2fr, then it's 33.333% 66.666%
auto is just "GIMME ALL THE SPACE NOW!"
if you invert it and do 1fr auto, you will see it worksauto is closer to max-content
with grid
auto 1fr the fr is going to take the space and auto will fit the content.