Display data in stacked form in lightning component

Question

Hi I want to display data in stacked form i.e one after the other in 2 coloumn format. I am using below code for that. But I am getting spaces between the data as shown in attachment; if data is more in one component and less in another.

 <lightning:layout multipleRows="true">
       <aura:iteration items="{!v.body}" var="test">
           <lightning:layoutItem size="6" smallDeviceSize="12" mediumDeviceSize="6">
               {!test}
           </lightning:layoutItem>
       </aura:iteration>
   </lightning:layout>

Answer 1

That's how an SLDS grid (lightning:layout) works. If you want to have them immediately below each other, you'd have to make a left grid and right grid:

<lightning:layout multipleRows="true">
    <lightning:layoutItem size="6">
        <lightning:layout multipleRows="true">
            <aura:iteration items="{!v.body}" indexVar="leftIndex" var="test">
                <aura:if isTrue="{!mod(leftIndex,2)==0}">
                    <lightning:layoutItem size="12">
                        {!test}
                    </lightning:layoutItem>
                </aura:if>
            </aura:iteration>
        </lightning:layout>
    </lightning:layoutItem>
    <lightning:layoutItem size="6">
        <lightning:layout multipleRows="true">
            <aura:iteration items="{!v.body}" indexVar="rightIndex" var="test">
                <aura:if isTrue="{!mod(rightIndex,2)==1}">
                    <lightning:layoutItem size="12">
                        {!test}
                    </lightning:layoutItem>
                </aura:if>
            </aura:iteration>
        </lightning:layout>
    </lightning:layoutItem>
</lightning:layout>