- From: Oriol Brufau <obrufau@igalia.com>
- Date: Thu, 8 Oct 2020 19:25:09 +0200
- To: Florian Rivoal <florian@rivoal.net>
- Cc: Elika Etemad <fantasai@inkedblade.net>, Tab Atkins <tabatkins@google.com>, www-archive@w3.org
- Message-ID: <49094ab0-6104-e1c3-3ff7-735b1f11875a@igalia.com>
> 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