title: How to hide a grid tile in a grid list in angular material design?
body: <p>I am new to material design. I was implementing a grid list using angular material design. But suddenly I needed to hide one tile.</p>
  
  <p>Can anyone tell that how to hide a tile in grid list. If I explicitly set "display" property to none then the space remains blank but not occupied by other tiles.</p>
  
  <p>Here is my Grid list</p>
  
  <pre><code>&lt;md-grid-list
          md-cols-sm="1" md-cols-md="1" md-cols-gt-md="3"
          md-row-height-sm="2:1" md-row-height-md="2:1" md-row-height-gt-md="1:1"
          md-gutter="12px" md-gutter-gt-sm="8px" &gt;
      &lt;md-grid-tile md-colspan-gt-md="2"&gt;
          &lt;md-whiteframe class="md-whiteframe-z2 slider" layout layout-align="center center"&gt;
              &lt;ul rn-carousel class="image" rn-carousel-auto-slide&gt;
                  &lt;li&gt;&lt;img src="images/american-cuisine.jpg" alt="" width="100%" height="100%"/&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;img src="images/indian-cuisine.jpg" alt="" width="100%" height="100%"/&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;img src="images/italian-cuisine.jpg" alt="" width="100%" height="100%"/&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;img src="images/japanese-cuisine.jpg" alt="" width="100%" height="100%"/&gt;&lt;/li&gt;
              &lt;/ul&gt;
          &lt;/md-whiteframe&gt;
      &lt;/md-grid-tile&gt;
      &lt;md-grid-tile&gt;
          &lt;md-whiteframe class="md-whiteframe-z2 login" layout layout-align="center center"&gt;
              &lt;span&gt;.md-whiteframe-z1&lt;/span&gt;
          &lt;/md-whiteframe&gt;
      &lt;/md-grid-tile&gt;
  &lt;/md-grid-list&gt;
  </code></pre>