想有卡与角料网格 [英] Trying to have a grid of card with angular material

问题描述

我一直想有采用了棱角分明的材料卡的网格。所以我使用MD-网格列表中的指令和MD卡。但结果是pretty丑，我不知道，了解MD-行唤起注意（比率）是如何工作的，我的文档，但它并没有说很多。

I have been trying to have a grid of card using angular-material. So I am using the directives md-grid-list and md-card. but the result is pretty ugly, and I am not sure to understand how the md-row-heigh (ratio) works, I have the documentation, but it doesn't say a lot.

这是我一直在做，到目前为止：
HTTP：//$c$cpen.io/stunaz/pen/qdQwbq ，我想有一个卡的响应电网，甚至不知道，如果MD-网格列表是合适的位置。

Here is what I have been doing so far : http://codepen.io/stunaz/pen/qdQwbq , I am trying to have a responsive grid of card, not even sure if the md-grid-list is appropriate here.

  <md-grid-list md-cols-sm="1" md-cols-md="2" md-cols-gt-md="6" md-row-height="300px" md-gutter="12px" md-gutter-gt-sm="8px">

<md-grid-tile class="gray" ng-repeat="user in users">
  <md-card>
    <img src="http://placehold.it/150x150" class="md-card-image" alt="user avatar">
    <md-card-content>
      <h2>{{user}}</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua</p>
    </md-card-content>
    <div class="md-actions" layout="row" layout-align="end center">
      <md-button>Save</md-button>
      <md-button>View</md-button>
    </div>
  </md-card>
</md-grid-tile>

我愿意接受任何形式的帮助。

I am open to any kind of help.

推荐答案

您可以使用的Flex箱代替MD-网格列表具有相同的效果。

You could use Flex Box instead of md-grid-list to have the same effect.

  <div class='md-padding' layout="row" flex>
     <div layout="row" flex>
        <div class="parent" layout="column" ng-repeat="user in users" flex>
            ... Your content here
        </div>
     </div>
  </div>

看看下面这个例子，在一排固定数量的卡：

Take a look at this Example with fixed number of cards in a row:

HTTP：//$c$cpen.io/anon/pen/bdQJxy

和一个负责任的例子，使用裹布局

And a responsive example, using Wrap layout

HTTP：//$c$cpen.io/anon/pen/MwzRde

希望这是你想要的。

这篇关于想有卡与角料网格的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！