如何创建响应式（可变列数）角材料卡网格

Question

I'm trying to create a grid of Angular-Material cards that behaves somewhat like a Bootstrap grid. 我正在尝试创建一个角度有点像Bootstrap网格的Angular-Material卡网格。 Ideally, cards will be full-width for small screen widths and jump to two columns at larger breakpoints. 理想情况下，对于较小的屏幕宽度，卡将为全宽，并在较大的断点处跳至两列。

Demo with 2 cards 演示2张卡

The problem is that AM creates columns for each card. 问题是AM为每个卡创建了列。 I haven't figured out how to specify the number of columns for each breakpoint. 我还没有弄清楚如何为每个断点指定列数。

Demo with 5 cards 5张演示

Here's the basis of the markup I'm using, which takes the card layout from rows to columns at the first breakpoint: 这是我使用的标记的基础，该标记在第一个断点处将卡片布局从行到列进行排列：

<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>

There's a similar question on SO already, but accepted answer is unsatisfactory as it uses custom CSS and the cards aren't fluid-width. SO上已经有一个类似的问题，但是可接受的答案并不令人满意，因为它使用了自定义CSS，并且卡的宽度也不宽。 I've found no other similar examples. 我没有找到其他类似的例子。

I suppose I could loop every two cards with Angular and create stacked sets, but that seems needlessly cumbersome. 我想我可以每两张卡片用Angular循环并创建堆叠的集合，但这似乎不必要。 I have to think that Material provides for a better solution. 我必须认为Material提供了更好的解决方案。 Also, such solutions would leave whitespace in the page where cards vary in height. 此外，此类解决方案还会在页面上留下空白，在空白处卡片高度会有所不同。 Material seems geared toward a Masonry-like flex layout, and I'd like to stick with that. 材料似乎适合于类似于砌体的柔性布局，我想坚持下去。

Thanks. 谢谢。

Answer 1

You can use the material Grid-List , it allows for custom col-spans and animates the changes when the width changes. 您可以使用材质Grid-List ，它允许自定义col-span并在宽度更改时为更改添加动画效果。

I adapted the sample from the site and added md-card in the contents. 我从站点改编了示例，并在内容中添加了md-card 。 Make sure to add layout-fill on the md-card . 确保在md-card上添加layout-fill 。 You can easily adapt the sample for your column count. 您可以轻松地根据样本的列数调整样本。

http://codepen.io/anon/pen/QypjWY http://codepen.io/anon/pen/QypjWY

I also adapted your 5 card sample. 我还改编了您的5张卡片样本。 You need to know the height of the cards in order to use the Grid-List, but you can easily achieve the 100% height on small screens. 您需要知道卡片的高度才能使用“网格列表”，但是您可以在小屏幕上轻松达到100％的高度。 You can use ratios or fixed CSS heights for the rows and then it is your cards job to display the content in a flexible way. 您可以为行使用比率或固定的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/ http://jsfiddle.net/2afaok1n/34/

Edit: 编辑：

If you are instead looking for some kind of staggered grid, then you have to add a library: angular-deckgrid , it just provides the grid layout, everything in the content is angular-material. 如果您要查找某种交错的网格，则必须添加一个库： angular-deckgrid ，它仅提供网格布局，内容中的所有内容都是角材料。 Unlike angular-masonry this library doesn't have any dependencies. 与角砌体不同，该库没有任何依赖关系。 If you are not worried about adding jQuery and the like then you can also use angular-masonry. 如果您不担心添加jQuery之类的东西，那么您也可以使用angular-masonry。

<div ng-app="app" ng-controller="DeckController" flex layout="column">
   <deckgrid class="deckgrid" flex source="data">
       <md-card>

The important part for the deck layout is the CSS configuration . 甲板布局的重要部分是CSS配置。 With this you configure the number of columns and their width. 这样，您可以配置列数及其宽度。 I have used a media query for the angular-material sm breakpoint to switch to single column layout. 我对角材料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/ http://jsfiddle.net/2afaok1n/39/

Edit 2: 编辑2：

There is also a masonry version which doesn't require jQuery and a simple directive to use it: angular-masonry-directive . 还有一个不需要jQuery的砌体版本和一个使用它的简单指令： angular-masonry-directive 。 Here is an example, it works similar to the other one. 这是一个示例，它的工作原理与另一个类似。

http://jsfiddle.net/xjnp97ye/1/ http://jsfiddle.net/xjnp97ye/1/

Answer 2

if i understood your question right Then use this code and replace the hello with anything you like 如果我正确理解了您的问题，请使用此代码，然后用您喜欢的任何内容替换问候

<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>

Answer 3

If I understood the question right, this works like a charm: 如果我理解正确的问题，这就像一个魅力：

<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 with multiple breakpoints : (resize the inner window, not the browser window) http://plnkr.co/edit/8QPYdzLD8qzEbdz5sesE?p=preview 具有多个断点的插口：（调整内部窗口的大小，而不是浏览器窗口的大小） http://plnkr.co/edit/8QPYdzLD8qzEbdz5sesE?p=preview

The plunker has been updated to show cards with different height. 塞子已更新，可以显示不同高度的卡片。
2 directives have been made, so the biggest height of all cards is kept in memory and this one is applied to all cards. 已经制定了2条指令，因此所有卡的最大高度都保留在内存中，并且该指令适用于所有卡。

Answer 4

<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>

Check this example: http://codepen.io/ktn/pen/jqNBOe 检查此示例： http : //codepen.io/ktn/pen/jqNBOe

如何创建响应式（可变列数）角材料卡网格

问题描述

4 个解决方案

解决方案1
18 已采纳 2016-01-05 11:21:02

解决方案2
2 2016-02-25 14:15:32

解决方案3
1 2016-01-09 22:24:23

解决方案4
1 2016-02-25 10:19:10

如何创建响应式（可变列数）角材料卡网格

问题描述

4 个解决方案

解决方案1 18 已采纳 2016-01-05 11:21:02

解决方案2 2 2016-02-25 14:15:32

解决方案3 1 2016-01-09 22:24:23

解决方案4 1 2016-02-25 10:19:10

解决方案1
18 已采纳 2016-01-05 11:21:02

解决方案2
2 2016-02-25 14:15:32

解决方案3
1 2016-01-09 22:24:23

解决方案4
1 2016-02-25 10:19:10