试图有一个带有角度材料的卡网格

Question

我一直试图使用角度材料制作卡片网格.所以我使用的指令是md-grid-list和md-card.但结果非常难看,而且我不确定md-row-heigh(比率)如何工作,我有文档,但它没有说太多.

这是我到目前为止所做的:http: //codepen.io/stunaz/pen/qdQwbq,我试图有一个响应网卡,甚至不确定md-grid-list是否合适.

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

我愿意接受任何帮助.

Answer 1

您可以使用Flex Box而不是md-grid-list来获得相同的效果.

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

看一下这个例子,连续使用固定数量的卡片:

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

一个响应的例子,使用Wrap布局

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

希望这是你想要的.