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

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

From: Manuel Rego Casasnovas <rego@igalia.com>
Date: Wed, 20 Apr 2016 11:18:08 +0200
To: "www-style@w3.org" <www-style@w3.org>
Message-ID: <57174950.6070808@igalia.com>
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].


Thanks,
  Rego

[1] https://lists.w3.org/Archives/Public/www-style/2015Nov/0074.html
[2]
https://drafts.csswg.org/css-grid/#valdef-grid-template-columns-percentage
[3] https://bugzilla.mozilla.org/show_bug.cgi?id=1264607


indefinite-grid-container.png
(image/png attachment: indefinite-grid-container.png)

Received on Wednesday, 20 April 2016 09:18:45 UTC

This archive was generated by hypermail 2.3.1 : Monday, 2 May 2016 14:39:38 UTC