[css-grid] Flexible lengths and sizing constraints

Hi,

I've a doubt regarding the expected behavior of a grid using flexible
lengths under different sizing constraints (min|max|fit-content or fill).

Let's use the following grid as example:
<style>
.container { width: 100px; height: 100px; }
.grid {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
}
.item { font: 10px/1 Ahem; }
</style>

<div class="container">
  <div class="grid">
    <div class="item">XXX XXX</div>
  </div>
</div>


Let's see what are the grid and item dimensions depending on the value
of the grid's width and height properties:
* width: auto; height: auto; => 100x10
* width: min-content; height: min-content; => 0x0
* width: max-content; height: max-content; => 70x10
* width: fit-content; height: fit-content; => 70x10
* width: fill; height: fill; => 100x100


I'd like to confirm if these are or not the right values.
In order to calculate the min-content contribution of the "1fr" track, I
consider we're calling the grid sizing algorithm with 0 available space,
so the "1fr" becomes 0px.
For the max-content contribution, I guess we're calling the algorithm
with infinite available space, so the size it's based on the track
contents [1], in this case the "1fr" becomes 70px.

Take into account that this doesn't match with what was agreed some time
ago [2]. If I understand it correctly, in that case you'll only run the
algorithm once using 0 as available space. So, "1fr" will be 0px for
both min-content and max-content contributions.

What do you think?

Thanks for your time,
  Rego

[1] http://dev.w3.org/csswg/css-grid/#fr-unit
[2] https://lists.w3.org/Archives/Public/www-style/2013Oct/0054.html

Received on Thursday, 12 March 2015 14:48:21 UTC