angularjs - md-grid-list: re-ordering of items -

i using angular material , have been looking @ md-grid-list lately design requirement trying solve.

i have bunch of div's children container layout row applied. each of child items have set widths\heights , have toggle button expand\collapse, doubles sizes on expand , return original sizes on collapse.

what i'd child items re-order fill available space (provided space big enough) around other items have been expanded.

right container element child items has layout-wrap applied , of course items gets expanded, children don't fit horizontally push down below previous item.

i have come across md-grid-list not sure provide me after, seems more suited percentage based sizes - or have got wrong?

i have seen http://masonry.desandro.com/ if resize window on homepage, that's kind of behaviour looking for, although not want height\widths update dynamically.

can behaviour achieved using angular material components alone?

i not sure if understand u correctly grid does?

you set column count , width/height ratio. can set height of rows in pixels. , can configure depending on css breakpoints.

<md-grid-list md-cols-sm="1" md-cols-md="2" md-cols-gt-md="4"     md-row-height-gt-md="{{height ? '100px' : '1:1'}}" md-row-height="100px"     md-gutter="12px" md-gutter-gt-sm="8px">      <md-grid-tile class="gray" md-rowspan="2" md-colspan="2" md-colspan-sm="1">       <md-grid-tile-footer>         <h3>#1: (2r x 2c)</h3>       </md-grid-tile-footer>     </md-grid-tile>      <md-grid-tile class="green">       <md-grid-tile-footer>         <h3>#2: (1r x 1c)</h3>       </md-grid-tile-footer>     </md-grid-tile> 

as can see added toggle switch height between ratio , fixed heigth: md-row-height-gt-md="{{height ? '100px' : '1:1'}}". animated default can roll own animations angular-animate.

http://codepen.io/kuhnroyal/pen/qyxoqo