Angular 2 Materialのmd-grid-tile内にmd-cardをネストする方法はありますか？

Question

私はhttps://material.angular.io/componentsで与えられた例に従っており、 "X"個のカードを同じ "行"に入れようとしています。これを達成するために、md-grid-tile内のMDカードをネストしました。私はオーバーフローに変更した場合、隠されたCSSルール：ここ

は、MD-グリッドタイルがオーバーフローを持っていることを考え出した場合、私はhttps://plnkr.co/edit/S8QkPOT8o34jWCO85S8P?p=preview

をやっているのplunkerで目に見える、私は全体のMDを見ることができます-md-grid-tile内のカード

md-grid-tile { 
    display: block; 
    position: absolute; 
    overflow: visible; 
} 

これはいいですか？あるいは、同じ数の「行」にX枚のカードを並べるにはどうしたらいいですか？私は別のアプローチを使うべきですか？

ありがとうございました。

Answer 1

mdカードをmdグリッドタイルなどの内側にネストしないでください。

は、このような最新デザインを実現するには、次の

あなただけの100％に設定されているデフォルトのMD-カードにより、MD-カードへの正しい幅を設定する必要があります。ここ は、このCSSルールを使用して「同じ行」上の2つのMD-カードを参照するにはplunker https://plnkr.co/edit/R7mhv59gAG6bZRbEuNKe?p=previewです：

.example-card { 
    display: inline-block; 
    width: 30%; 
    margin: 20px; 
    vertical-align: top; 
    cursor: pointer; 
} 

Answer 2

私はMD-グリッドタイル内のネストされたMD-カードを使用して、それを達成することができています。問題は.mat-figureのプロパティ "align-items：center"でした。ここで

**Component:** 

import { Component, OnInit } from '@angular/core'; 

@Component({ 
    templateUrl: './abc.component.html', 
    styleUrls: ['./abc.component.css'] 
}) 
export class AbcComponent implements OnInit { 
    ngOnInit() { 

    } 

    tiles = [ 
    {text: 'One', cols: 1, rows: 1, color: 'lightblue'}, 
    {text: 'Two', cols: 1, rows: 1, color: 'lightgreen'}, 
    {text: 'Three', cols: 1, rows: 1, color: 'lightpink'}, 
    {text: 'Four', cols: 1, rows: 1, color: '#DDBDF1'}, 
    {text: 'Five', cols: 1, rows: 1, color: '#DDBDF1'}, 
    {text: 'Six', cols: 1, rows: 1, color: '#DDBDF1'}, 
    ]; 

} 

**abc.component.html file content:** 

<md-grid-list cols="3"> 
    <md-grid-tile 
     *ngFor="let tile of tiles" 
     [colspan]="tile.cols" 
     [rowspan]="tile.rows" 
     [style.background]="tile.color"> 

    <md-card class="square_board">HI</md-card> 
    </md-grid-tile> 
</md-grid-list> 

**abc.component.css file content:** 

.square_board{ 
    margin: 10px; 
    width: 100%; 
} 

::ng-deep md-grid-tile.mat-grid-tile .mat-figure { 
    align-items: initial; /*vertical alignment*/ 
} 

結果である： はここに私のソリューションです

このアプローチのbenifitは、我々はカードの間隔と配置を気にする必要はありませんということです。