Re: Fwd: [css-grid] question on clamping grid items to fixed track size

-------- Forwarded Message --------
Date: Wed, 14 Feb 2018 15:07:57 -0800
From: fantasai
To: Mats Palmgren
CC: Tab Atkins Jr.

On 02/14/2018 10:45 AM, Mats Palmgren wrote:
 > On 2/13/18 1:52 AM, fantasai wrote:
 >  > If the width of the item is 'auto' and it has 'justify-self: start'
 >  > (shrinkwraps), then its min-width is zero but its specified width is
 >  > fit-content(track-size); with a track-size of zero (minmax(0px, 0px))
 >  > this yields a grid track of zero, a grid container of zero, and an
 >  > item just large enough for its min-content width, i.e. the width of
 >  > “foobar”.
 >
 > No, I think you're mistaken, the track sizing is minmax(auto, 0px),
 > not minmax(0px, 0px).
 >
 > For clarity, the testcase is:
 > <style type="text/css">
 > .grid {
 >    display: inline-grid;
 >    grid-template-columns: minmax(auto, 0px);
 > }
 > </style>
 > <div class="grid">
 >    <div style="justify-self: start">foobar</div>
 > </div>
 >
 > First we determine the shrinkwrap size of the grid container.
 > We'll assume <body> is wide enough for its max-content size, so its
 > shrinkwrap size is its max-content size, which per Grid §5.2 is:
 > "The max-content size (min-content size) of a grid container is
 > the sum of the grid container’s track sizes (including gutters) in
 > the appropriate axis, when the grid is sized under a max-content
 > constraint (min-content constraint)."
 >
 > and then §11.5.2 "For auto minimums" says:
 > "If the track has an auto min track sizing function and the grid
 > container is being sized under a min/max-content constraint, set
 > the track’s base size to the maximum of its items’ min/max-content
 > contributions, respectively."
 >
 > So we set the column size to the width of the text "foobar" here.
 > The sum of the track sizes is then also that size, so that's
 > the intrinsic width of the container, not zero.

OK

 > Now we layout (Reflow) the grid container using its intrinsic size as
 > its definite size.  We're *not* under a max-content constraint now,
 > so §11.5.2 now says:  "Otherwise, set its base size to the maximum
 > of its items’ min-size contributions."
 > which in this case is the item's AMS, which we clamp to zero due
 > to the 0px track max-sizing.  So in layout the column size is zero.

OK

 > We then layout the grid item in a containing block with that size.
 > I agree with you that the item's size is its fit-content(track-size),
 > but with track-size = 0 we get:
 > "min(max-content size, max(min-content size, stretch-fit size))"
 > https://drafts.csswg.org/css-sizing-3/#fit-content-inline-size
 > "stretch-fit size" the CB size, which is zero
 > "min-content size" is the item's AMS clamped to zero
 > "max-content size" is the size of "foobar"
 > So the item's size in layout is min("foobar", max(0, 0)) = 0.

The min-content size is the width of “foobar”, not the AMS.
The AMS is the used min-width. These are two different concepts,
and the shrinkwrap size (required by justify-self: start) uses
the min-content size, not the min-width in the formula.

 > So, the final results in layout is:
 > container size = width of "foobar"
 > columnn size = 0
 > grid item size = 0
 >
 > Since you disagree, please point out where I'm wrong above.

I think you're right, per spec, about the container size,
but wrong about the grid item size.

 > ====
 >
 > So, the thing that I think you're missing is that there are three steps
 > for sizing a shrinkwrap Grid container:
 >
 > Determining its min-content size, which runs the Track Sizing Algo
 > under a min-content constraint. (item/column size = 0)

The item under a min-content constraint is the size of “foobar”, not zero.
The track sizing algo will also, currently, come up with a column size
of min-content per the paragraph being discussed in #2303, no?
   https://github.com/w3c/csswg-drafts/issues/2303

 > Determining its max-content size, which runs the Track Sizing Algo
 > under a max-content constraint. (item/column size = "foobar")

Yes.

 > Layout, using the shrinkwrap size from the above steps as its definite
 > size, running the TSA under no constraint. (item/column size = 0)

item size = “foobar” (its shrinkwrap size, per justify-self)
column size = item's *min-size contribution* = (clamped) AMS = 0

 > Also, there's no difference for the 20px case really.
 > Let's say we replace the item in the example above with:
 >    <div style="justify-self: start; width:20px"></div>
 >
 > In this case the item's AMS is 20px, but there's nothing in §6.6 that
 > prevents clamping the AMS just because it came from its specified size.
 > So its min size is 0px and its max size is 20px, which makes it no
 > different from the case above.

No, this case is different, because the min-size contribution
is the specified 20px here: the min-size contribution is the
AMS only when the specified size is 'auto' (just like its
min-content contribution is the min-content size only when
the specified size is 'auto').

 > So, the final results in layout for this case should be:
 > container size = 20px
 > columnn size = 0
 > grid item size = 0 (min(20px, max(0px, 0px))

column size and grid item size would be 20px then, I think.

OK, let me know where I messed up? :)

~fantasai

p.s. Would you mind if I forwarded this discussion to www-archive?
It might be useful to refer back to at some point in the future.

Received on Monday, 26 March 2018 19:53:52 UTC