Angular Material -md-grid-list content

Question

I am trying to use md-grid-tile of angular material.The Issue I am facing is content of md-grid-tile is aligned center.How to make to work it from Start

    <md-content layout-padding> 

         <md-grid-list md-cols="6"
            md-row-height-gt-md="1:1" md-row-height="4:3" md-gutter-gt-md="16px"
            md-gutter-gt-sm="8px" md-gutter="4px"> 
                    <md-grid-tile
                    ng-repeat="room in floorDetails.roomDetails"
                    ng-style="{'background': '#f2f2f2'}"
                    md-colspan-gt-sm="3"
                    md-rowspan-gt-sm="2">  



                                <div layout="row"  layout-align="center center">
                                <b >Room1</b>
                                </div>
                                 <div class='md-padding' layout="row" layout-wrap>
                                         <md-card class="md-card" ng-repeat="bed in room.bedIds">
                                             <md-card-content>

                                             </md-card-content>
                                         </md-card>
                                     </div>
                             </div>
              </md-grid-tile>        
      </md-grid-list>  

Current snap

Desired snap

Answer 1

Try to provide a codepen/plunkr with an example next time, people are more inclined to help you if they have sample code to play around with.

You should read up on angular-material layout. You are mainly missing a <div layout="column" layout-fill> container inside of your md-grid-tile. The layout-fill makes the container fill the whole tile.

You can then adjust the size of your cards with fixed css sizes or flex them. The example flexes them horizontally which may not be desired.

codepen