1

I wanted to lay a grid using lightning layout for 8 elements per row on a list populated dynamically.

What I want to accomplish is given below

<lightning:layout horizontalAlign="spread" multipleRows="true">
    <lightning:layoutItem size="6" padding="around-small">
        <lightning:layout horizontalAlign="spread" multipleRows="true">
            <lightning:layoutItem size="3" padding="around-small">
                <div class="custom-box">A-1001</div>
            </lightning:layoutItem>
            <lightning:layoutItem size="3" padding="around-small">
                <div class="custom-box">A-1002</div>
            </lightning:layoutItem>
            <lightning:layoutItem size="3" padding="around-small">
                <div class="custom-box">A-1003</div>
            </lightning:layoutItem>
            <lightning:layoutItem size="3" padding="around-small">
                <div class="custom-box">A-1004</div>
            </lightning:layoutItem>
        </lightning:layout>
    </lightning:layoutItem>
    <lightning:layoutItem size="6" padding="around-small">
         <lightning:layout horizontalAlign="spread" multipleRows="true">
             <lightning:layoutItem size="3" padding="around-small">
                <div class="custom-box">A-1005</div>
            </lightning:layoutItem>
            <lightning:layoutItem size="3" padding="around-small">
                <div class="custom-box">A-1006</div>
            </lightning:layoutItem>
            <lightning:layoutItem size="3" padding="around-small">
                <div class="custom-box">A-1007</div>
            </lightning:layoutItem>
            <lightning:layoutItem size="3" padding="around-small">
                <div class="custom-box">A-1008</div>
            </lightning:layoutItem>
        </lightning:layout>
    </lightning:layoutItem>
</lightning:layout>

The above lays 8 elements for a static DOM. I want the same to be accomplished for laying a list dynamically.

Thanks for the help in advance. **************UPDATE*************** After implementing sfdcfox solution I am getting the below layout. Any idea why to fix the solution?

enter image description here

2 Answers 2

2

For more complicated layouts, such as in this answer, the answer is to reform your data as a list of lists, which would make your code look more like this:

<lightning:layout horizontalAlign="spread" multipleRows="true">
  <aura:iteration items="{!v.masterList}" var="row">
    <lightning:layoutItem size="6" padding="around-small">
        <lightning:layout horizontalAlign="spread" multipleRows="true">
          <aura:iteration items="{!row}" var="cell">
            <lightning:layoutItem size="3" padding="around-small">
                <div class="custom-box">{!cell}</div>
            </lightning:layoutItem>
          </aura:iteration>
        </lightning:layout>
    </lightning:layoutItem>
  </aura:iteration>
</lightning:layout>

Your data would be organized as follows:

[['A-1001','A-1002','A-1003','A-1004'],['A-1005','A-1006','A-1007','A-1008']]

Full Demo:

<aura:application extends="force:slds">
    <aura:attribute name="masterList" type="List" default="[['A-1001','A-1002','A-1003','A-1004'],['A-1005','A-1006','A-1007','A-1008']]" />

    <lightning:layout horizontalAlign="spread" multipleRows="true">
        <aura:iteration items="{!v.masterList}" var="row">
            <lightning:layoutItem size="6">
                <lightning:layout horizontalAlign="spread">
                    <aura:iteration items="{!row}" var="cell">
                        <lightning:layoutItem size="3" class="slds-border_top slds-border_left slds-border_right slds-border_bottom slds-p-around_medium slds-align_absolute-center">
                            <div class="custom-box">{!cell}</div>
                        </lightning:layoutItem>
                    </aura:iteration>
                </lightning:layout>
            </lightning:layoutItem>
        </aura:iteration>
    </lightning:layout>
</aura:application>
7
  • iHi @sfdcfox I tried implementing your solution. But getting the grid as I have posted the image in the question. Any solutions? Commented Jun 5, 2018 at 3:13
  • @AbhiramSheshadri I didn't test this one, but I suspect it's the padding. Could you try removing it?
    – sfdcfox
    Commented Jun 5, 2018 at 4:00
  • I tried removing the padding, still I am having the same grid. Commented Jun 5, 2018 at 4:47
  • @AbhiramSheshadri The problem is your extra, mystery CSS. It works correctly in core SLDS with no additional styles, so something you've done in your style sheet is the cause.
    – sfdcfox
    Commented Jun 5, 2018 at 4:55
  • Actually my CSS is empty. There is no extra CSS in the component. Don't know what's causing the issue. Anyway thanks for the comments. Yet to find a solution for the issue. Commented Jun 5, 2018 at 4:58
-1

It will look like below. more example can be found here

<aura:component>
  <aura:iteration items="{!v.list}" var="item">
    <div class="slds-grid">
      <div class="slds-col">
        <span>item.one</span>
      </div>
      <div class="slds-col">
        <span>item.two</span>
      </div>
      <div class="slds-col">
        <span>item.three</span>
      </div>
      <div class="slds-col">
        <span>item.four</span>
      </div>
      <div class="slds-col">
        <span>item.five</span>
      </div>
      <div class="slds-col">
        <span>item.six</span>
      </div>
      <div class="slds-col">
        <span>item.seven</span>
      </div>
      <div class="slds-col">
        <span>item.eight</span>
      </div>
    </div>
  </aura:iteration>
</aura:component>

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .