角度素材-MD-グリッドリストコンテンツ

Question

私は角material.The問題のmd-grid-tileを使用しようとしています私が直面していますmd-grid-tileの内容でスタート

<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> 

からそれを仕事にするためにcenter.Howを揃えています現在のスナップ

理想のスナップ

Answer 1

次回にcodepen/plunkrを提供するようにしてください。人々は、周りを遊ぶサンプルコードがあれば、あなたを助けてくれる傾向があります。

angular-material layoutにお読みください。あなたは主にmd-grid-tileの中に<div layout="column" layout-fill>コンテナがありません。 layout-fillは、コンテナをタイル全体に塗りつぶします。

これで、カードのサイズを一定のCSSサイズに調整したり、曲げることができます。この例では、水平に曲げますが、これは望ましくない場合があります。

codepen