Re: [csswg-drafts] [css-flexbox][css-grid] Choose a single option for resolving padding and maring percent values of grid/flex items

We've taken quite a bit of care to keep flexbox and grid aligned as much as we can and this is great. As far as this issue is concerned I'm not sure this is a hard requirement.  In fact, this is one of the places where the two modules differ. 

When we introduced grid it was our intention to provide two dimensional, symmetric layout behavior as much as possible. Since then the spec moved mostly in terms of syntax, thus, this behavior principle is something we still feel strong about. 

Flexbox on the other hand is a single dimensional space distribution, thus keeping everything symmetric is not that necessary.

These were our hopes and intentions but reality is different. After releasing grid in all current browsers we are fragmented between webkit and blink supporting non-symmetric % resolution while gecko and edge have a symmetric resolution. At the end of the day this is pretty bad for interop and we already see some pages being broken due to this difference.

The following options should help us decide on a single, interoperable behavior.
1. Resolve flexbox % against inline axis (non-symmetric) and change grid to resolve all % in their own axis (symmetric)
2. Align with blink and webkit - both flexbox and grid to be asymmetric (resolve margins and padding % in their inline axis)
3. Align with gecko and edge - both flexbox and grid are symmetric (resolve all % in their own axis)

-- 
GitHub Notification of comment by atanassov
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/2085#issuecomment-349800984 using your GitHub account

Received on Wednesday, 6 December 2017 22:49:07 UTC