[css-box-3] Should margin-trim apply to flex or grid containers?

[fantasai]

Like it says on the tin. Also, which axes should it apply to? http://drafts.csswg.org/css-box-4/#margin-trim

Options are: Block axis only / Main axis only / Cross axis only / Both / Neither

[ExE-Boss]

I believe it should.

[letrastudio]

Just some thoughts, no real conclusion :)

My instinct is that it should apply. My main gripe with Grid is precisely how poorly it works as a progressive enhancement over elements that use margin collapsing. It can be very hard to wrangle the margins when they are not set on direct children.

My first thought was that it should apply to both axes. That way margin-trim: all could always be used to get a clean slate when using gap for spacing.

But thinking about it as simply a solution for dealing with margin collapsing in grid/flex contexts, It might make more sense to just apply it to the block axis, since margin collapsing only works in that direction.

But then wouldn't this:

.grid {
  display: grid;
  margin-trim: all;
}

achieve the same result as:

.grid {
  display: grid;
}

.grid > * {
  margin-block-start: 0;
  margin-block-end: 0;
  margin-trim: all;
}

So maybe margin-trim doesn't really need to apply to grid or flex containers, as it wouldn't solve any unsolvable problem 🤷‍♂️

Anyway, hope this lends some perspective, because I'd really love to see margin-trim implemented.

[mirisuzanne]

Agenda+ to resolve that this should apply to grid & flex containers.

[css-meeting-bot]

The CSS Working Group just discussed Should margin-trim apply to flex or grid containers, and agreed to the following:

• RESOLVED: margin-trim applies to flex and grid containers also

The full IRC log of that discussion

<fantasai> Topic: Should margin-trim apply to flex or grid containers
<fantasai> github: https://github.com//issues/3255
<fantasai> miriam: margin-trim is designed to remove margins at the edge of the box that are inside the box
<fantasai> miriam: e.g. you have h1 inside section, but don't want margin on the h1 because section already has padding
<fantasai> miriam: or ...
<fantasai> miriam: That happens most often in block dimension, can also happen sometimes in inline dimension
<fantasai> miriam: We were looking through issues around it
<fantasai> miriam: One issue was whether it applies to flex or grid containers
<fantasai> miriam: And idea is to let it apply to both of them
<Rossen_> q?
<fantasai> jensimmons: sgtm
<fantasai> florian: haven't thought deeply, but wfm
<fantasai> Rossen_: Does this have an affect on alignment?
<florian> fantasai: only to the extend that if you trim alignment on one side of the box, you'll have alignment on the rest
<fantasai> Rossen_: So margin-trim is pre-alignment
<florian> fantasai: For instance, things would not longer be centered if you trim on some sides
<florian> s/if you/if you only/
<fantasai> Rossen_: Might check if this is desired effect, but sounds good to me
<fantasai> Rossen_: Anyone else?
<fantasai> Rossen_: Any objections?
<fantasai> RESOLVED: margin-trim applies to flex and grid containers also
<florian> q+