Angular Material -md-grid-list content

Question

I am trying to use the md-grid-tile angular material. The problem I am facing is that the contents of md-grid-tile are centered. How to make it work with 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 binding

Desired binding

Answer 1

Next time try providing a codec / plunkr example, people are more inclined to help you if they have some sample code for the game.

You should read the angular material layout . Basically you don't have the <div layout="column" layout-fill> container inside your md-grid-tile . layout-fill makes the container fill the entire tile.

Then you can adjust the size of your cards with fixed css sizes or roll them out. An example bends them horizontally, which may be undesirable.

codepen