0

I want to use Mat-Grid in my project as Grid Layout.Which is flexible and responsive as I wish.Because shrink ratio is same for all boxes as I wish.But when screen is 425px(Can be scalled in browser for PC or in mobile) I want to see all boxes in the grid as vertical not horizontal always.Ho can I do that?My another question is it possible to arrange that gap between boxes?

Here that example below you can see https://stackblitz.com/edit/angular-tekgya?file=app/grid-list-overview-example.html

Here how it should be seem on the below when width is 425px

enter image description here

Edric
  • 24,639
  • 13
  • 81
  • 91
Timuçin Çiçek
  • 1,516
  • 3
  • 14
  • 39
  • 1
    Refer to the below SO post https://stackoverflow.com/questions/48493652/angular-5-mat-grid-list-responsive – nbsamurai Sep 24 '19 at 13:15

1 Answers1

1

You can subscribe to window.resize event using rxjs fromEvent function:

fromEvent(window, 'resize')
.pipe(
  map(event => (event.target as any).innerWidth),
  startWith(window.innerWidth)
).subscribe(width => {
  this.columns = width <= 425 ? 1 : 3;
});

and in your html file assign cols to the columns property

<mat-grid-list [cols]="columns" rowHeight="2:2" gutterSize="10">

Also use gutterSize to define spacing between elements.

Please remember to unsubscribe from the window.resize subscription.

Maciej Kasprzak
  • 929
  • 6
  • 17
  • Thanks for your solution but can you edit by adding all variables also.Because I don't know the type of columns in the ts component for example – Timuçin Çiçek Sep 24 '19 at 13:23
  • 1
    Sure, here you go: https://stackblitz.com/edit/angular-tekgya-wig88d I added takeUntil to remove subscription when component is destroyed. – Maciej Kasprzak Sep 24 '19 at 13:29