FxLayoutGap grid mode not working

[alexcoroza]

Bug Report

What is the expected behavior?

grid mode should add spaces between elements

What is the current behavior?

it adds space inside the element instead

What are the steps to reproduce?

Create a new angular 8 app with @angular/flex-layout@8.0.0-beta.27

https://stackblitz.com/edit/angular-zbzm2n

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

I remember using it in my previous project(not sure if angular 6 or 7) and it is working but now its not. Need to add gaps between elements inside a fxlayout="row wrap" container

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

Is there anything else we should know?

I already read the documentation and it should add the gap "outside" and not "inside" the element

[Mikastark]

This isn't really an issue but a misunderstanding. fxLayoutGap in grid mode add a padding to the child elements (in your example padding: 0px 10px 10px 0px;) that's why it seems broken. To fix this you must wrap your child elements into a div with a fxFlex directive (with or without a value) like this

<div fxLayout="row wrap" fxLayoutGap="10px grid">
  <div fxFlex>
    <button>asd</button>
  </div>
  <!-- the rest -->
</div>

To fit very nicely I recommand using css to force buttons to have 100% width.

I know, it's pretty annoying to use more wrapping containers but in grids world it helps alot ;)

[CaerusKaru]

@Mikastark is correct. Closing this issue as working as designed.

[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.}