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

Percentage margins and padding should resolve against their own axis. The Firefox/Edge implementation sounds like the better choice. Resolving against the inline axis sounds like something that we would have done before two-dimensional web design (and CSS grid) existed.

As far as the "percentage padding hack" and aspect ratio goes: why not just do the following instead? Is that problem not already solved in CSS3? I don't think that should be of concern when deciding between implementations.

For flexbox:
```
:root { --parent-width: 400px; }
.parent-flex {
 display: flex;
 width: var(--parent-width);
}
.parent-flex .child {
 /* 25% of width */
 width: calc(var(--parent-width) * 0.25);
 /*for easier viewing*/
 background-color: #bbb; border-radius: 50%;
 /*4:3 aspect ratio*/
 height: calc(var(--parent-width) * 0.25 * 3 / 4);
}
```
For grid ...
```
:root { --parent-width: 400px; }
.parent-grid {
 display: grid;
 width: var(--parent-width);
 /* 25% of width */
 grid-template-columns: repeat(4, calc(var(--parent-width) * 0.25));
}
.parent-grid .child {
 /*for easier viewing*/
 background-color: #bbb; border-radius: 50%;
 /*4:3 aspect ratio*/
 height: calc(var(--parent-width) * 0.25 * 3 / 4);
}
```

[This can be seen live at CodePen](https://codepen.io/doseofted/pen/goXYaP). A property that looks similar to the [aspect-ratio media feature](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/aspect-ratio) would look prettier but this feels like a less "hacky" way of doing it.

If Firefox/Edge implementation is accepted as standard way of doing things, then you could try to emulate the old functionality (if you wanted to) like so:
```
:root { --parent-width: 200px; }

.parent-grid-margins {
 display: grid;
 width: var(--parent-width);
 /* 25% of width */
 grid-template-columns: repeat(2, calc(var(--parent-width) * 0.5));
}
.parent-grid-margins .child {
 /*for easier viewing*/
 background-color: #bbb; border-radius: 50%;
 /*random height*/
 height: 120px;
 /*16:9 aspect ratio*/
 margin-bottom: calc(var(--parent-width) * 0.5 * 9 / 16)
}
```

[This can be seen live here](https://codepen.io/doseofted/pen/vpWBRG).

In short, I think option one [(in CSS Grid draft spec)](https://drafts.csswg.org/css-grid-1/#item-margins) is the better option.

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

Received on Friday, 5 January 2018 18:30:14 UTC