Question about grid sizing and aspect-ratio

Hi Oriol,

I need your help figuring out a grid + aspect ratio question, as I am not sufficiently familiar with the details, especially of grid, to confidently answer this myself.

Let's say you have the following:

<style>
body { width: 1000px; }
div {
  display: grid;
  grid: auto 10px / auto 50px;
}
img {
  justify-self: stretch;
  aspect-ratio: 1/1;
}
</style>
<body>
  <div>
    <img src=http://lorempixel.com/200/200/>
   </div>
</body>

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;
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
6) the first row's hight is driven by the image we just talked about, so 950px
7) the second row is 10px hight
8) the grid is therefore 960px high
9) the grid container box's height is therefore 960px as well

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.

Assuming that was right, what happens if we add this:

div { aspect-ratio: 1/1; }

Does that cause the grid container box's height to grow from 960px tall to 1000px?
If so, does that cause the grid's height to grow to 1000px as well?
If so, does that cause the first grid row to grow to 1000px-10px=990px?
If so, does that cause the image's width to grow to 990px?
If so, does that cause the first grid column to become 990x?
If so, does that cause the grid's width to become 990px+50px=1040px?
If so, does it overflow it's grid container box ?

I'm kind of assuming my logic above isn't right, and that we stop at some earlier step, but I'm not sure where. I feel like https://drafts.csswg.org/css-sizing-4/#aspect-ratio-cyclic is trying to tell me something about this, but I don't get it.

If I am not wrong, then what about further adding this this then:

div { position: absolute; }

My naive understanding of what would then happens is:
0) absolutely sized elements are intrinsically sized, so we need to figure the insides first
1.a) The image has an intrinsic width of 200px
1.b) the first grid column is sized to that, so it too is 200px
1.c) the second grid column is 50px
1.d) the grid's width is therefore 250px
1.e) the grid container box's width is therefore 250x
2.a) The image has an intrinsic height of 200px
2.b) the first grid row is sized to that, so it too is 200px
2.c) the second grid row is 10px
2.d) the grid's height is therefore 210px
2.e) the grid container box's height is therefore 210x
3) the grid's container box would want to be 250px * 210px, but does the aspect ratio cause the grid container's element height to grow to 250px to match its width?
4) If so, does that cause the grid to want to match this size as well?
5) If so, does that cause the first row's height to grow to 250px-10px=240?
6) If so, does that cause the image's height to grow to 240px?
7) If so, does that cause the iamge's width to grow to 240px?
8) If so, does that cause the first grid column's width to grow to 240px?
9) If so, does that cause the grid's width to grow to 240px + 50px = 290px?
10) If so, does that cause the grid container box's width to grow to 290px?
11) If so, the aspect ratio would cause the grid container's element height to grow to 290px, causing a circularity back to step 3 which would loop to infinity, so that can't be right.

It seems to me that it's much more likely that the source of the problem is that my naive understanding of how this works doesn't actually fit with the reality of how grid layout and aspect ratio work, but I'm not educated enough on this topic to figure out where the discrepancy is.

—Florian

Received on Wednesday, 7 October 2020 05:52:11 UTC