我想,不允许在材质网格(嵌套网格)中放置材质网格? 有人可以确认一下我的假设吗? (我正在使用Angular Material 6.)
<mat-grid-list cols="6" gutterSize="32px">
<mat-grid-tile [colspan]="3">
left
<mat-grid-list cols="3" gutterSize="8px">
<mat-grid-tile>1</mat-grid-tile>
<mat-grid-tile [colspan]="2">2</mat-grid-tile>
<mat-grid-tile [colspan]="3">3</mat-grid-tile>
</mat-grid-list>
</mat-grid-tile>
<mat-grid-tile [colspan]="3">
right
<mat-grid-list cols="3" gutterSize="8px">
<mat-grid-tile>4</mat-grid-tile>
<mat-grid-tile [colspan]="2">5</mat-grid-tile>
<mat-grid-tile [colspan]="3">6</mat-grid-tile>
</mat-grid-list>
</mat-grid-tile>
</mat-grid-list>
结果应该是这样的(两个不同的装订线尺寸):
我为什么要这个?我必须实现的设计在列之间有不同的GUTTER SIZES: - /我认为网格中的网格将是一个聪明的解决方案,但它不起作用。
更新:解决方案建议here不起作用,因为这只能在旧的AngularJS材料中使用。
在尝试了我能想到的一切之后,我得出结论,材料网格中的材料网格是不可能的,并且可能在概念上并不意味着工作(可以理解)。
我决定使用CSS网格(https://www.w3schools.com/css/css_grid.asp)来解决我的问题。这工作(到目前为止):
<mat-grid-list cols="2" rowHeight="fit" gutterSize="32px">
<mat-grid-tile>
<div class="css-grid">
<div class="css-grid-tile top-left">
</div>
<div class="css-grid-tile top-right">
</div>
<div class="css-grid-tile bottom">
</div>
</div>
</mat-grid-tile>
<mat-grid-tile>
<div class="css-grid">
<div class="css-grid-tile top-left">
</div>
<div class="css-grid-tile top-right">
</div>
<div class="css-grid-tile bottom">
</div>
</div>
</mat-grid-tile>
.css-grid {
display: grid;
grid-gap: 8px;
grid-template-columns: 33% 67%; // two columns
grid-template-rows: 33% 67%; // two rows
height: 100%;
width: 100%;
.css-grid-tile {
&.top-left {
grid-column: 1 / 2;
}
&.top-right {
grid-column: 2 / 3;
}
&.bottom {
grid-column: 1 / 3;
}
}
}