fxLayoutGap grid does not seem to work

[literalpie]

Bug Report

What is the expected behavior?

`fxLayoutGap="16px grid" fxLayout="rowWrap" should result in a gutter between all elements in a grid.

What is the current behavior?

adding fxLayoutGap="16px grid" causes no gaps between flex elements, and seems to add a 16px margin on the right side

What are the steps to reproduce?

In the stackblitz, change fxLayoutGap="16px" to fxLayoutGap="16px grid"

• Stackblitz

What is the use-case or motivation for changing an existing behavior?

It seems to be a bug. It's possible that I am totally misunderstanding the expected behavior, in which case, I will offer documentation wording suggestions.

Which versions of Angular, Material, OS, TypeScript, browsers are affected?

7.x, flex-layout beta 22

Is there anything else we should know?

[CaerusKaru]

You have to be extra careful when working with flex, margins, and padding. I think this template is what you're looking for:

<div style="background-color: red;" fxLayout="row wrap" fxLayout.xs="column" fxLayoutGap="16px grid">
  <div *ngFor="let i of cards" style="height: 200px;  background-color: blue;">
    <div fxFlex="1 0 200px" style="background-color: green"></div>
  </div>
</div>

[literalpie]

Okay, that worked. It looks like you had to remove fxFlex from the direct (blue) child and put it in a (green) grandchild. I can still add flex to the blue child to make the green grandchildren grow to fit the container.

So is the rule that the grid option will not apply gutters on any direct children that have fxFlex?

[CaerusKaru]

I don't have a complete rationale for it, but yes that's generally the rule. I haven't been able to come up with a good way to phrase that for the docs, but we'll try to add it some time this week.

[literalpie]

Okay, I think I've been causing confusion by using background color as an indicator of where there's padding. the padding (gutter) is included in the background color, so it's impossible to tell where the lines between elements are.

Direct children have perfectly fine gutters around content, but if you want gutters around a whole element (gutters around mat-cards, or gutters around an element of a color), that's when you need two levels - a child that contains the gutter, and a grandchild that fits between the gutters.

Maybe the docs could say something like:

Unlike the standard gap functionality, fxLayoutGap with the grid keyword uses the padding of each element to add a gutter.

It kind of already says that, but maybe this is more clear

[BenDevelopment]

Here is a specific case where fxLayoutGap is not managed when fxHide changes:
https://stackblitz.com/edit/angular-pnh2nf
As you can see, when a div is hidden, gap is not removed. And when a div is shown, gap is not added.

Should I open a new issue?

[CaerusKaru]

@BenDevelopment Please open a new issue. I thought we had patched that...

[CaerusKaru]

@literalpie I've added your note, paraphrased, to the bottom of the fxLayoutGap doc page. I hope this is satisfactory, and I'm closing the issue.

[CaerusKaru]

@BenDevelopment check out PR #983

[BenDevelopment]

I've added another case when using column instead of row (the problem looks the same):
https://stackblitz.com/edit/angular-fxhidegap

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}