CODEWITHSUNDEEP
angularangular-material
Timuçin Çiçek
Timuçin Çiçek

Reputation: 1626

Changing the layout order of Mat-Grid due to specific width

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

Upvotes: 0

Views: 929

Answers (1)

Maciej Kasprzak
Maciej Kasprzak

Reputation: 949

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.

Upvotes: 1

Related Questions