new directive fxLayoutGutter

Proposal

What is the summary of the proposal?

<md-card-content>
  <div fxLayout="row wrap" fxLayoutGap="24px">
    <md-input-container fxFlex="25%">
      <input mdInput placeholder="Name">
    </md-input-container>
    <md-input-container fxFlex="25%">
      <input mdInput placeholder="Occupation">
    </md-input-container>
    <md-input-container fxFlex="50%">
      <input mdInput placeholder="Company">
    </md-input-container>
  </div>
</md-card-content>

fxLayoutGap adds this style:

margin-right: 24px;

In this case there will be a transition to a new line, but I would not like Using css calc is not convenient fxFlex="calc(50% - 24px)"

What is the proposal?

Create new directive fxLayoutGutter ~or update fxLayoutGap~ If set to fxLayoutGutter="24px" apply a style padding:

padding-left: 12px;
padding-right: 12px;

We divide the value of fxLayoutGutter / 2 and insert padding in the style

Is there anything else we should know?

This implementation is in ng-zorro grid

[nzbin]

I’m also think fxLayoutGutter is necessary.

[CaerusKaru]

I’ll discuss this with @ThomasBurleson, but my direct impression is that we won’t be adding a new directive for this in the near future. If you’d like to add the functionality yourself, you can add a StyleBuilder for fxLayoutGap that, for instance allows you to add gutter to a value for this.

E.g. fxLayoutGap="24px gutter"