角材：マット・カード全体をマット・グリッド・タイルに塗りつぶす

Question

mat-grid-listを使用して、mat-grid-tileにはカードの内容に関係なく全タイルを埋めるグリッド・リスト・レイアウトを作成します。ほとんどのカードは、複数の行および/または列を占有する必要があります。これまで私はそれを働かせることができませんでした。

物事は私が試してみました：

• 各カードのCSS widthとセレクタmat-cardを使用してheight 100％に設定します。これにより、各カードは、カードが入っているmat-grid-tileだけでなく、画面全体を満たします。
• セレクタmat-grid-tile > mat-cardを使用して、各カードのCSS とheightを100％に設定します。カードは、それぞれのコンテンツのサイズにラップされたグリッドタイルの中央に置かれているため、セレクタを持たないのと同じ効果があります。
• コードに続くthis question。問題は、プロパティflex、layout-wrapということで、サンプルコードは、角2ではなく4

Editを使用しているためかlayout-fillは、私には使用できません。私は最初の試みの結果を誤解のように見えます上記に列挙した。カードは実際にはmat-grid-tileだけを塗りつぶしますが、その周囲の影はタイルの境界によって切り取られます。

Answer 1

私はあなたのために働いていない、正確にわからないが、私はちょうどstackblitzであなたのシナリオを再作成し、mat-cardのための次のスタイルを使用しています

mat-card { 
    width: calc(100% - 70px); 
    height: calc(100% - 70px); 
} 

ここstackblitzリンクです：https://stackblitz.com/edit/angular-eqs6cp?file=app%2Fapp.component.css

そして、（私があったように）念のためにあなたがここにCSS calc()のサポートを心配しているのですサポートされるブラウザとバージョン：http://caniuse.com/#feat=calc

（ nswerは最初のコメントに基づいて更新されました）