Re: [css-grid] Margins and Auto-sized cells

On Sun, Nov 2, 2014 at 3:26 AM, François REMY
<francois.remy.dev@outlook.com> wrote:
> 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.

Yup, it's a "formatting context", which prevents margin collapse.
That's a Chrome bug.  Report?

> 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.

Ah, I think we don't explicitly state that you want the "outer"
contribution.  I'll fix.

~TJ

Received on Sunday, 2 November 2014 18:21:11 UTC