Re: [css-grid] Absolutely positioned items and static position

On 18/12/14 21:00, Tab Atkins Jr. wrote:
> This was all defined in the spec already:
> http://dev.w3.org/csswg/css-grid/#static-position
> 
> tl;dr: We don't care about the grid-placement properties when
> determining the static position.

Yeah, the definition of the static position was already there, just that
I wasn't sure if it should care about the grid-placement properties or
not. Thanks for the clarification.

Now, my question is if the grid-placement properties are ignored or not
to calculate the containing block of the abspos children when they don't
have offsets. In that case we'd use the static position to place them,
but I'm not sure about what would be their size if they use width/height
100%.

Let's come back to the example, to see if everything is right:
<style>
  .grid {
    display: grid;
    grid-template-columns: 100px 100px;
    grid-template-rows: 50px 50px;
    position: relative;
    padding: 15px;
    width: 500px;
    height: 500px;
  }

  .absolute {
    position: absolute;
    width: 100%;
    height: 100%;
  }

  .offset {
    left: 0;
    top: 0;
  }

  .area {
    grid-row: 2 / 3;
    grid-column: 2 / 3;
  }

  .span {
    grid-row: span 2;
    grid-column: span 2;
  }

  .auto {
    grid-row: auto / 3;
    grid-column: auto / 3;
  }
</style>

<div class="grid">
  <div id="item"></div>
</div>

The positions and sizes of the #item depending on the class would be:
1) class "absolute" position 15x15 size 530x530
2) class "absolute offset" position 0x0 size 530x530
3) class "absolute area" position 15x15 size 100x50
4) class "absolute offset area" position 115x65 size 100x50
5) class "absolute span" position 15x15 size 530x530
6) class "absolute offset span" position 0x0 size 530x530
7) class "absolute auto" position 15x15 size 215x115
8) class "absolute offset auto" position 0x0 size 215x115

My doubts are in:
3) I'm not sure if the size should be 100x50 (respecting the
grid-placement properties) or 530x530 (ignoring them).
   This's the same for 8).
5) Again, I'm not sure about the size. But I guess that span should be
ignored or we would need to run the auto-placement algorithm before
(which doesn't seem to make sense as abspos children do not take space
on the grid).
   The same for 6).

Thank you very much,
  Rego

PS: This is a nit but I guess that section "9.4. Absolutely-positioned
Grid Items" [1] could be renamed to "9.4. Absolutely-positioned Grid
Container Children" (which will match with "4.3. Static Position of Grid
Container Children" [2]).

[1] http://dev.w3.org/csswg/css-grid/#abspos-items
[2] http://dev.w3.org/csswg/css-grid/#static-position

Received on Tuesday, 23 December 2014 09:41:43 UTC