Попытка иметь сетку карты с материалом angular

Я пытался создать сетку с использованием angular -материала. Поэтому я использую директивы md-grid-list и md-card. но результат довольно уродлив, и я не уверен, что понимаю, как работает md-row-heigh (ratio), у меня есть документация, но она не говорит много.

Вот что я делал до сих пор: http://codepen.io/stunaz/pen/qdQwbq, я стараюсь иметь гибкую сетку карты, даже не уверен, что здесь подходит список md-grid.

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

Я открыт для любой помощи.

Ответы

Ответ 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 layout

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

Надеюсь, это то, что вы хотели.

Ответ 2

Используйте эту разметку HTML и измените номер гибкого диска в md-карте, чтобы выполнить свое требование.

<div class='md-padding' layout="row" layout-wrap>
                    <md-card flex="15" ng-repeat ="n in [1, 2, 3, 4, 5, 6, 7, 8, 9, 0]">
                        <img ng-src="http://i2.wp.com/celebsbios.com/wp-content/uploads/2015/12/Halsey-Singer-3.jpg?resize=150%2C150" class="md-card-image" alt="Washed Out">
                        <md-card-title>
                            <md-card-title-text>
                                <span class="md-headline">Action buttons</span>
                            </md-card-title-text>
                        </md-card-title>
                        <md-card-content>
                            <p>
                                The titles of Washed Out breakthrough song and the first single from Paracosm share the
                                two most important words in Ernest Greene musical language: feel it. It a simple request, as well...
                            </p>
                            <p>
                                The titles of Washed Out breakthrough song and the first single from Paracosm share the
                                two most important words in Ernest Greene musical language: feel it. It a simple request, as well...
                            </p>
                            <p>
                                The titles of Washed Out breakthrough song and the first single from Paracosm share the
                                two most important words in Ernest Greene musical language: feel it. It a simple request, as well...
                            </p>
                        </md-card-content>
                        <md-card-actions layout="row" layout-align="end center">
                            <md-button>Action 1</md-button>
                            <md-button>Action 2</md-button>
                        </md-card-actions>
                    </md-card>
                </div>