我正在尝试创建一个有点像Bootstrap网格的Angular Material卡网格。理想情况下，对于较小的屏幕宽度，卡片将是全宽的，并在较大的断点处跳到两列。
演示2张卡
问题是A-M为每张卡创建列。我还没有弄清楚如何为每个断点指定列数。
使用5张卡进行演示
以下是我使用的标记的基础，它在第一个断点处将卡片布局从行到列：
<div ng-app layout="column" layout-gt-sm="row" class="layout-sm-column layout-row">
<div flex class="flex" ng-repeat="i in [1,2,3,4,5] track by $index">
<md-card>
SO上也有类似的问题，但公认的答案并不令人满意，因为它使用了自定义CSS，而且卡片没有流畅的宽度。我没有发现其他类似的例子。
我想我可以用Angular循环每两张牌，并创建堆叠集，但这似乎不必要地麻烦。我不得不认为Material提供了一个更好的解决方案。此外，这样的解决方案会在卡片高度不同的页面上留下空白。材料似乎倾向于砖石式的柔性布局，我想坚持这一点。
谢谢。
您可以使用材质"网格列表"，它允许自定义列跨度，并在宽度更改时为更改设置动画。
我改编了网站上的样本，并在内容中添加了md-card。请确保在md-card上添加layout-fill。您可以很容易地根据列数调整样本。
http://codepen.io/anon/pen/QypjWY
我还修改了你的5张卡片样本。你需要知道卡片的高度才能使用网格列表，但你可以在小屏幕上轻松实现100%的高度。您可以对行使用比率或固定的CSS高度，然后以灵活的方式显示内容是您的卡片工作。
<md-grid-list ng-app="app" layout-fill flex
md-cols-sm="1"
md-cols-md="2"
md-cols-gt-md="5"
md-row-height-sm="100%"
md-row-height="600px"
md-gutter="8px">
<md-grid-tile ng-repeat="i in [1,2,3,4,5] track by $index">
<md-card layout-fill>
http://jsfiddle.net/2afaok1n/34/
编辑：
如果你正在寻找某种交错的网格，那么你必须添加一个库：有角度的甲板网格，它只提供网格布局，内容中的所有内容都是有角度的材料。与角砌石不同，这个库没有任何依赖关系。如果你不担心添加jQuery等，那么你也可以使用角砌石。
<div ng-app="app" ng-controller="DeckController" flex layout="column">
<deckgrid class="deckgrid" flex source="data">
<md-card>
甲板布局的重要部分是CSS配置。使用此选项可以配置列数及其宽度。我使用了一个媒体查询角度材料sm断点来切换到单列布局。
.deckgrid::before {
content: '4 .column.column-1-4';
font-size: 0;
visibility: hidden;
}
.deckgrid .column {
float: left;
}
.deckgrid .column-1-4 {
width: 25%;
}
.deckgrid .column-1-1 {
width: 100%;
}
@media screen and (max-width: 960px) {
.deckgrid::before {
content: '1 .column.column-1-1';
}
}
http://jsfiddle.net/2afaok1n/39/
编辑2:
还有一个不需要jQuery的砖石版本和一个简单的指令来使用它：角砌石指令。这是一个例子，它的工作原理与另一个类似。
http://jsfiddle.net/xjnp97ye/1/
如果我理解你的问题然后使用此代码并将hello替换为任何您喜欢的
<md-grid-list md-cols-lg="12" md-cols-gt-lg="15" md-cols-xs="3" md-cols-sm="6" md-cols-md="9" md-row-height-gt-md="1:1" md-row-height-md="1:1" md-row-height="1:2" md-gutter-gt-md="16px" md-gutter-md="8px" md-gutter="4px">
<md-grid-tile ng-repeat="contact in contacts" md-colspan="3" md-rowspan-gt-sm="4" style="background:red;">
hello
</md-grid-tile>
</md-grid-list>
如果我正确理解了这个问题，这就像一个魅力：
<body ng-app="app" ng-cloak>
<div layout="column" layout-gt-sm="row" layout-wrap>
<div flex="25" flex-gt-sm="50" ng-repeat="i in [1,2, 3, 4, 5] track by $index">
<md-card>
<!-- You code-->
</md-card>
</div>
</div>
</body>
具有多个断点的Plunker：（调整内部窗口的大小，而不是浏览器窗口的大小）http://plnkr.co/edit/8QPYdzLD8qzEbdz5sesE?p=preview
plunker已经更新，可以显示不同高度的卡片
已经制定了2个指令，因此所有卡的最大高度都保存在内存中，并且这个指令应用于所有卡。
<div ng-repeat="i in [1,2, 3, 4, 5] track by $index" flex-xs="100" flex-sm="50" flex-md="50" flex="33">
<md-card>
<md-card-title >
<md-card-title-text >
<span class="md-headline">Demo Title {{i}}</span>
<span class="md-subhead">Demo Description</span>
</md-card-title-text>
</md-card-title>
</md-card>
</div>
检查此示例：http://codepen.io/ktn/pen/jqNBOe