0

I am trying to analyze the difference between div and lightning layout in aura for a responsive UI. With the below code, I am not able to get a responsive view when using lightning layout in contrast to a successful responsive output when using div. Can someone please shed some light if I am missing anything on lighting layout

enter image description here

<aura:component implements="flexipage:availableForAllPageTypes" access="global" >
    <lightning:card title="Hello">
        <lightning:layout horizontalAlign="center">
            <lightning:layoutItem size="12" smallDeviceSize="12" mediumDeviceSize="3" padding="around-small">
                    <lightning:button class="slds-size_full" variant="brand" name="test2" label="Layout"/>
            </lightning:layoutItem>
            <lightning:layoutItem size="12" smallDeviceSize="12" mediumDeviceSize="3" padding="around-small">
                    <lightning:button class="slds-size_full" variant="brand" name="test2" label="Layout"/>
            </lightning:layoutItem>
        </lightning:layout>
        
        <div class="slds-grid slds-wrap slds-grid_align-center">
              <div class="slds-col slds-size_1-of-1 slds-medium-size_3-of-12 slds-large-size_3-of-12 slds-var-p-around_small">
                  <lightning:button class="slds-size_full" variant="brand" name="test2" label="Div"/>
              </div>
            
             <div class="slds-col slds-size_1-of-1 slds-medium-size_3-of-12 slds-large-size_3-of-12 slds-var-p-around_small">
                  <lightning:button class="slds-size_full" variant="brand" name="test2" label="Div"/>
              </div>
        </div>
    </lightning:card>
</aura:component>
Improve this question

1 Answer 1

Reset to default
0

You'll need the multipleRows="true" attribute on your lightning:layout in order for the layoutItems to flow to multiple rows

https://developer.salesforce.com/docs/component-library/bundle/lightning:layout/specification

Improve this answer
1
  • Adding multipleRows="true" worked. I had that at some point but I guess I removed it and now I realize it's impact. Thanks Jeff!
    – cjprad-sfdc
    Commented Dec 5, 2021 at 18:49

You must log in to answer this question.

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