W3C home > Mailing lists > Public > www-style@w3.org > November 2014

[css-grid] Margins and Auto-sized cells

From: François REMY <francois.remy.dev@outlook.com>
Date: Sun, 2 Nov 2014 12:26:45 +0100
Message-ID: <DUB405-EAS81A7022BA2BA0F8F065B49A5980@phx.gbl>
To: "'www-style list'" <www-style@w3.org>
CC: "'Manuel Rego Casasnovas'" <rego@igalia.com>, "'Tab Atkins Jr.'" <jackalmage@gmail.com>
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>


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





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.





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,

Received on Sunday, 2 November 2014 11:27:13 UTC

This archive was generated by hypermail 2.4.0 : Friday, 25 March 2022 10:08:48 UTC