Hi guys,

I'm just starting to use the Lightning Design System and I dont really understand the behaviour of the grid system.
 

<div class="slds-grid slds-wrap">
   <aura:iteration items="{!v.fieldsFromObject}" var="field">
        <div class="slds-col--padded slds-size--1-of-1 slds-small-size--1-of-1 slds-medium-size--2-of-6 slds-large-size--3-of-12">
                        TEST
        </div>
    </aura:iteration>
</div>

And thats the result: 


As you can see, the last content has 100% width ... my understanding is that it should be 33.33% just like the other cols.

Am I missing something here?

Cheers

Hi guys,

I'm just starting to use the Lightning Design System and I dont really understand the behaviour of the grid system.
 

<div class="slds-grid slds-wrap">
   <aura:iteration items="{!v.fieldsFromObject}" var="field">
        <div class="slds-col--padded slds-size--1-of-1 slds-small-size--1-of-1 slds-medium-size--2-of-6 slds-large-size--3-of-12">
                        TEST
        </div>
    </aura:iteration>
</div>

And thats the result: 


As you can see, the last content has 100% width ... my understanding is that it should be 33.33% just like the other cols.

Am I missing something here?

Cheers