W3C home > Mailing lists > Public > www-style@w3.org > April 2016

Re: [css-sizing][css-grid] Definite/indefinite size in positioned/floated grid containers

From: fantasai <fantasai.lists@inkedblade.net>
Date: Wed, 20 Apr 2016 19:55:08 -0400
To: Manuel Rego Casasnovas <rego@igalia.com>, "www-style@w3.org" <www-style@w3.org>
Message-ID: <571816DC.4010100@inkedblade.net>
On 04/20/2016 05:18 AM, Manuel Rego Casasnovas wrote:
> Hi,
> this is a new doubt similar to an old thread [1].
> The first question is related to percentage tracks in a positioned grid
> container. This is the text from the spec [2]:
> "If the inline or block size of the grid container is indefinite,
>   <percentage> values relative to that size are treated as auto."
> Let's use an example of a very simple grid:
> <div style="display: grid; position: absolute; font: 25px/1 Ahem;
>              grid-template-columns: 50%;">
>    <div>XXXX</div>
> </div>
> If I understand it correctly, this grid has an indefinite width, so the
> size of the column should be the same than if we use "auto" (e.g.
> grid-template-columns: auto;). In this example it should be 100px.
> Is this the expected behavior?
> However, if we compare this with how regular blocks behave, we see that
> it's quite different.
> An example with regular blocks:
> <div style="position: absolute; font: 25px/1 Ahem;">
>    <div style="width: 50%;">XXXX</div>
> </div>
> In this case 50% is resolved against the intrinsic size of the
> container, which is 100px, so the final size for the element is 50px
> instead of 100px (like in a grid).
> I guess it's fine that the behavior of regular blocks vs grid is
> different, but I'd like to confirm it.
> As a related note, I'd like to confirm that the size of a floated grid
> container is indefinite too.
> So reusing the example:
> <div style="display: grid; float: left; font: 25px/1 Ahem;
>              grid-template-columns: 50%;">
>    <div>XXXX</div>
> </div>
> Again the size of the column here should be 100px. Is it right?
> Last, I've created an example showing the differences between regular
> blocks and grid containers. You can check it live at:
> http://jsbin.com/parigo/1/edit?html,css,output
> I'm attaching the output in Chrome Canary where grdi tracks are 100px,
> however in Firefox they're 50px.
> Just for reference, all these questions come from a discussion on a
> Firefox bug [3].

Hm, so the expected behavior is that the indefinite size is
calculated based on 'auto' sizing the grid track, but then
once the grid container size is resolved, the percentage
behaves as a percentage of that resulting size?

This makes sense to me. It seems to me (speaking personally)
that updating the spec to have the same percentage resolution
behavior for grid tracks as it does for block children and
flex items would be the most reasonable thing to do here.



Received on Wednesday, 20 April 2016 23:55:51 UTC

This archive was generated by hypermail 2.4.0 : Friday, 25 March 2022 10:09:02 UTC