How to hide a grid tile in a grid list in angular material design?

Question

I am new to material design. I was implementing a grid list using angular material design. But suddenly I needed to hide one tile.

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.

Here is my Grid list

<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" >
    <md-grid-tile md-colspan-gt-md="2">
        <md-whiteframe class="md-whiteframe-z2 slider" layout layout-align="center center">
            <ul rn-carousel class="image" rn-carousel-auto-slide>
                <li><img src="images/american-cuisine.jpg" alt="" width="100%" height="100%"/></li>
                <li><img src="images/indian-cuisine.jpg" alt="" width="100%" height="100%"/></li>
                <li><img src="images/italian-cuisine.jpg" alt="" width="100%" height="100%"/></li>
                <li><img src="images/japanese-cuisine.jpg" alt="" width="100%" height="100%"/></li>
            </ul>
        </md-whiteframe>
    </md-grid-tile>
    <md-grid-tile>
        <md-whiteframe class="md-whiteframe-z2 login" layout layout-align="center center">
            <span>.md-whiteframe-z1</span>
        </md-whiteframe>
    </md-grid-tile>
</md-grid-list>

Answer 1

You cannot hide the tile without leaving a blank space. This is because the tile's location is determined when the grid is loaded. The right way to do it is to remove the tile and re-render the grid.