[css-grid] Margins and Auto-sized cells

Hi there! Here’s another issue I’m scratching my head over :

 

<grid one-column three-rows>

                <grid-item><p margin=”20px 0px”>…</p></grid-item>

                <grid-item margin=”20px 0px”>… </grid-item>

                <grid-item><p margin=”20px 0px”>…</p></grid-item>

</grid>

[kinda http://gridbyexample.com/examples/code/example14.html]

 

 

ISSUE 1:

=============

In Chrome, the <p> margins completely disappears. My take is that given
<grid-item> is a block formatting context, it should prevent the margin from
collapse-bubbling and the <p> should be 20px down relatively to the
<grid-item> (kinda as if <grid-item> had “padding: 20px 0px”) and therefore
the margin impacts the row height. I’ve no idea what the spec says we should
do, sadly.

 

FWIW, IE does like me, it takes the <p> margin as a vertical spacing inside
the <grid-item> and therefore increases the row height accordingly.

 

 

ISSUE 2:

=============

In Chrome, the “margin” of the second <grid-item> is taken into account to
compute the breadth of the second row. I think it makes sense, but I’ve no
idea whether or not we should do this. I’m under the impression the spec
says we should use the “min-content” size of the grid item to compute the
track breadth, which (I believe) doesn’t contain the margin (so my
implementation doesn’t yield something great, here). 

 

FWIW, IE agrees with Chrome here and use the vertical margin as part of the
auto-sizing. I’m probably going to change my implementation to match, but I
wonder if the specs really says that.

 

 

Best regards,

François