Change the layout or cols value of md-grid-list based on screen size

user_2172547 0
Viewed 7901

I am using Grid List of angular material 2.

Here is the plunker https://plnkr.co/edit/0v9R3e4x3tThh85147x7?p=preview

Here I have defined a grid list of three columns and there are three tiles (showing in a row as defined as three columns).

I want to change the layout direction of tiles like if the screen size gets shrunk at a certain point then all the tiles should be in column one below the other that is somehow value of cols parameter changed to 1. How is it possible? Is it possible with flex-layout ?

angular-flex-layout angular-material2 angular grid
4 Answers

To dynamically update the column size of md-grid-list I put variables in for md-cols-gt-sm and md-cols-sm and then update them in my controller. For example they look like 

md-cols-gt-sm="{{nav.variable}}" md-cols-sm="{{nav.variable}}"

Cheers

user_60061020
Related