Re: Question about grid sizing and aspect-ratio

> My naive understanding of what happens is:
> 1) As a block level child of the body, the grid container box's width is stretch-fit sized, so 1000px.
> 2) Within the grid container, the grid itself is stretch as well, so it's width is 1000px too.
> 3) The second column of the grid is 50px, and the first one is auto, which resolves to 1000px-50px = 950px;
The grid width is just the sum of track sizes, so technically 3) happens 
before 2).
But yes, the numbers are correct.
> 4) the image's is in the first column, so due to justify-self:stretch, its width is 950px
> 5) due the image's aspect ratio, it's height is also 950px
I'm not sure about this. In Chromium and Firefox, it's 200px.

As https://drafts.csswg.org/css-grid/#grid-item-sizing warns, using 
`justify-self: stretch`
 > may distort the aspect ratio of the item, if it has one.

I think the aspect ratio is usually applied to the computed size (which 
in CSS2 includes min and max properties), not to the final used size 
after stretching.

For example, the minimum contribution used to size auto tracks basically 
relies on https://drafts.csswg.org/css-grid/#min-size-auto,

 > If the item has an intrinsic aspect ratio and its *computed* 
preferred size property in the opposite axis is definite, then the 
transferred size suggestion is that size (clamped by the opposite-axis 
min and max size properties if they are definite), converted through the 
aspect ratio

In this case the grid container doesn't have a definite height so we are 
sizing under a max sizing constraint, then the row should be sized with 
the max-content contribution (I don't think implementations support 
this, but if you specify `grid-template-rows: max-content 10px` they 
will still produce a 200px row).

Then, do the min/max-content contributions apply the ratio to the 
computed size in the other axis, or to the used size after stretching? I 
don't know enough about css-sizing, and 
https://drafts.csswg.org/css-sizing-3/#max-content-contribution is not 
detailed enough.
But implementations don't seem to take stretching into account, and not 
sure if changing would be web compatible at this point.

6) the first row's hight is driven by the image we just talked about, so 950px

Implementations say 200px.
> 7) the second row is 10px hight
> 8) the grid is therefore 960px high
Implementations say 210px.
> 9) the grid container box's height is therefore 960px as well

Implementations say 210px again.

> That's not the actual question, just the set up, but if I got it wrong already, the rest falls apart, so let me know if I'm off.
Seems the rest may have fallen apart.

> Assuming that was right, what happens if we add this:
>
> div { aspect-ratio: 1/1; }

I'm afraid I don't know the details of `aspect-ratio` yet.

Received on Thursday, 8 October 2020 17:29:07 UTC