Cercando di avere una griglia di carta con materiale angolare

Question

Ho cercato di avere una griglia di carta usando materiale angolare. Quindi sto usando le direttive md-grid-list e md-card. ma il risultato è piuttosto brutto, e non sono sicuro di capire come funziona l'md-row-heigh (ratio), ho la documentazione, ma non dice molto.

Ecco cosa ho fatto fino ad ora: http://codepen.io/stunaz/pen/qdQwbq, Sto cercando di avere una griglia reattiva di scheda, non sono nemmeno sicuro che l'elenco md-griglia sia appropriato qui.

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

io sono aperto a qualsiasi tipo di aiuto.

Answer 1

È possibile utilizzare Flex Box anziché md-grid-list per ottenere lo stesso effetto.

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

Date un'occhiata a questo esempio con numero fisso di carte consecutive:

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

E un esempio di risposta, utilizzando Wrap layout

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

Spero che questo è cosa volevi.

Answer 2

Utilizzare questo codice HTML e modificare il numero di flex in md-card per soddisfare le proprie esigenze.

<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's breakthrough song and the first single from Paracosm share the 
           two most important words in Ernest Greene's musical language: feel it. It's a simple request, as well... 
          </p> 
          <p> 
           The titles of Washed Out's breakthrough song and the first single from Paracosm share the 
           two most important words in Ernest Greene's musical language: feel it. It's a simple request, as well... 
          </p> 
          <p> 
           The titles of Washed Out's breakthrough song and the first single from Paracosm share the 
           two most important words in Ernest Greene's musical language: feel it. It's 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>