title: angular material bootstrap like grid mat-grid-list
body: <p>I am trying to achieve Bootstrap style responsive screen using angular 2 and angular material.</p>
  
  <p>Consider this example : <a href="https://getbootstrap.com/docs/4.0/examples/album/" rel="nofollow noreferrer">https://getbootstrap.com/docs/4.0/examples/album/</a>
  when we resize the window the thumbnails start stacking. </p>
  
  <p>I am using angular material using mat-grid-list and I want to achieve the same behavior.</p>
  
  <p><a href="https://stackblitz.com/angular/oalnrrygvga?file=app%2Fgrid-list-dynamic-example.html" rel="nofollow noreferrer">https://stackblitz.com/angular/oalnrrygvga?file=app%2Fgrid-list-dynamic-example.html</a></p>
  
  <p>Material documentation regarding responsive layout grid define:</p>
  
  <blockquote>
    <p>The number of columns displayed in the grid is determined by the
    breakpoint range (a range of predetermined screen sizes) at which a
    screen is viewed, whether it’s a breakpoint for mobile, tablet, or
    another size</p>
  </blockquote>
  
  <p>1) So what needs to be done to achieve the same result in angular material as that of bootstrap</p>
  
  <p>I found a solutions : 
  <a href="https://stackoverflow.com/questions/43891840/responsive-design-using-md-grid-list-in-angular-2/44846224#44846224">Responsive Design using md-grid-list in angular 2</a></p>
  
  <p>Here they are using either non angular material library or using window size event. If material is supposed to be responsive we shouldn't be needing to do that.</p>
  
  <p>So can some one please help me out how to get it done in purely material way . </p>
  
  <p>Please see: I am beginner in front end design so I don't know lot jargons from UI world.</p>
  
  <p>Thanks</p>