create grid with dynamic data in SLDS

Question

I'm trying to build a grid output (3 columns) that will display varying numbers of data elements depending on the search.

i'm trying to figure out how to make it so that the grid will create a new row dynamically when it has to, for a 3 column layout.

this is an external angular2 app, i'm just playing with SLDS instead of bootstrap..

so let's say i've got an *ngFor condition that returns 12 results, i'm looking to understand how i can use the slds-grid layout to display that as 4 rows * 3 columns of data.

looking to emulate the col-md-3 type functionality in bootstrap..

Answer 1

The solution for this was to nest these together. Set an overall 12 column layout, with the repeating loop inside that (in this instance, *ngFor statement), like so:

<div class="slds-card__body">
        <div class="slds-grid slds-wrap">
            <div class="slds-theme--default slds-size--1-of-1 slds-medium-size--6-of-6 slds-large-size--12-of-12" >
                <div class="slds-grid slds-wrap slds-grid--pull-padded">
                    <div class="slds-box slds-m-around--small slds-size--1-of-3 slds-medium-size--2-of-6 slds-large-size--3-of-12" 
                    *ngFor="let album of albums">
                        <span class="slds-avatar slds-avatar--large slds-avatar--circle">
                            <img src="{{album.images[0].url}}" alt="{{album.name}} Image" />
                        </span>
                        <h4> {{album.name}}</h4>
                        <a routerLink="album/{{album.id}}" class="slds-button slds-button--neutral">Album Details</a>
                    </div>
                </div>
            </div>
        </div>
    </div>

Still working on fine tuning it exactly so it's pretty - but the grid is working now :)