Lightning component iteration through a list into a table with set number of columns

Question

Simple question but I'm sure there's a much easier way.

So I iterate through a list and right now they're each on their own row. But how would I put the values into columns of, for example 3?

For example if we have 9 values, it'd look like this:

x x x

x x x

x x x

and if we had 5 values, it'd look like this:

x x x

x x

Answer 1

you can achieve by tweak u r styles, i just used slds-grid slds-wrap and slds-size--1-of-3 slds-p-horizontal_x-small

cmp

<aura:attribute name="nineItems" type="List" default="['1','2','3','4','5','6','7','8','9']" />
<aura:attribute name="fiveItems" type="List" default="['1','2','3','4','5']" />
<aura:handler name="init" value="{!this}" action="{!c.doInit}" />
<lightning:card title="Nine Items">
    <div class="slds-grid slds-wrap">
    <aura:iteration items="{!v.nineItems}" var="item" indexVar="index">
        <div class="slds-size--1-of-3 slds-p-horizontal_x-small">{!item}</div>

    </aura:iteration>    
</div>
</lightning:card>
<lightning:card title="Five Items">
    <div class="slds-grid slds-wrap">
    <aura:iteration items="{!v.fiveItems}" var="item" indexVar="index">
        <div class="slds-size--1-of-3 slds-p-horizontal_x-small">{!item}</div>

    </aura:iteration>    
</div>
</lightning:card>

please upvote/accept if solution works, and let me know if had any issue with this solution