각도 재질 : 전체 매트 그리드 타일에 매트 카드 채우기

Question

을 사용하여 각 카드의 내용에 관계없이 전체 타일을 채우는 격자 목록 레이아웃을 만들려고합니다. mat-grid-tile에 mat-card이 포함되어 있습니다. 대부분의 카드는 여러 행 및/또는 열을 차지해야합니다. 지금까지 나는 그것을 작동시킬 수 없었다.

상황은 내가 시도 :

• 각 카드의 CSS width과 선택 mat-card를 사용하여 height 100 % 설정. 이로 인해 각 카드는 카드가 들어있는 mat-grid-tile이 아닌 전체 화면을 채 웁니다.
• 각 카드의 CSS width 및 height을 선택자 mat-grid-tile > mat-card을 사용하여 100 %로 설정하십시오. 이 카드는 셀렉터가없는 것과 같은 효과가 있습니다. 카드는 격자 모양의 가운데에 각 내용의 크기로 래핑됩니다.
• this question의 코드를 따르십시오. 문제는 속성 flex, layout-wrap 및 layout-fill 샘플 코드는 각도이 아니라

4. 이상의 편집을 사용 아마도 때문에, 나에게 사용할 수없는 것입니다 : 내가 처음 시도의 결과를 오해처럼 보이는 위에 나열된. 카드는 실제로는 mat-grid-tile을 채우지 만 주위의 그림자는 타일의 경계에 의해 잘립니다.

Answer 1

내가 정확히 당신을 위해 작동하지 않는 것을 잘 모르겠지만, 난 그냥 stackblitz에서 시나리오를 재현하고, mat-card을 위해 다음과 같은 스타일을 사용하고 있습니다 : https://stackblitz.com/edit/angular-eqs6cp?file=app%2Fapp.component.css

:

이

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

여기 stackblitz 링크입니다

그리고 (I이었다 같은) 단지의 경우 여기에 CSS를 calc()에 대한 지원에 대한 걱정의 지원되는 브라우저 및 버전 : http://caniuse.com/#feat=calc

(A nswer가 첫 번째 의견을 기반으로 업데이트되었습니다.)