Components: Enhance mat-grid-list to allow separate horizontal and vertical gutter sizes to be specified

[Mufasa]

Bug, feature request, or proposal:

feature request

What is the expected behavior?

I think it would be valuable extension to allow this control to have separate horizontal and vertical gutter sizes

What is the current behavior?

The control allows a single gutterSize to be specified and this is used for both the horizontal and vertical gutter spacing.

What are the steps to reproduce?

No steps required - this is the default behaviour of this control.

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

There are many applications that require a grid with either just horizontal or just vertical gutters. This is currently not possible to do with mat-grid-list. I tried doing this by using flex-layout but that does not produce a layout that is correctly centred.

Here is a stackblitz example I had setup to see if I could achieve what I wanted with either flex-layout or mat-grid-list: https://stackblitz.com/edit/flexlayout-zu9b19

You will see that the mat-grid-list always remains centred as you adjust the width of the browser window where as the flex-layout example seems to go off-centre at certain sizes.

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

Angular 6.0.3
Material 6.1.0
TypeScript 2.7.2
OS macOS High Sierra 10.13.4
Browser Chrome 66.0.3359.181 (Official Build) (64-bit)

Is there anything else we should know?

No

[intellix]

This would allow stuff like placing header/footer outside of the grid tiles. Therefore the images would maintain aspect ratio and you could place the 48px footer outside. As you could do something like:

gutterX="30px"
gutterY="78px"

[desilvaNSP]

Hi @josephperrott ,

Thanks, @Mufasa reporting the issue, This is a great feature if we can implement in lib, we can smoothly adjust the UI grid after implement this in X and Y directional.

Appreciate that if we can get this fix soon. we are looking forward to updating from your lib.

Thanks
Sandun Priyanka