0

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

1

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>
  • iHi @sfdcfox I tried implementing your solution. But getting the grid as I have posted the image in the question. Any solutions? – Abhiram Sheshadri Jun 5 '18 at 3:13
  • @AbhiramSheshadri I didn't test this one, but I suspect it's the padding. Could you try removing it? – sfdcfox Jun 5 '18 at 4:00
  • I tried removing the padding, still I am having the same grid. – Abhiram Sheshadri Jun 5 '18 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 Jun 5 '18 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. – Abhiram Sheshadri Jun 5 '18 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>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.