3

Looking to create this type of Grid in Lightning Grid. However what currently happens is C and D get pushed below item B (which is a chatter feed so it is long)

What I want

Current Component (mine is more set up with C/D switched with A, but i think the concept remains the same)

<aura:component implements="lightning:homeTemplate" 
            description="A home page you always dreamed of, 3 columns." >
<aura:attribute name="column1" type="Aura.Component[]" />
<aura:attribute name="column2" type="Aura.Component[]" />
<aura:attribute name="column3" type="Aura.Component[]" />
<aura:attribute name="column4" type="Aura.Component[]" />

<div>
    <lightning:layout horizontalAlign="spread" pullToBoundary="small" 
multipleRows="true">
        <lightning:layoutItem size="4" flexibility="grow" 
                              padding="around-small">
            {!v.column1}
        </lightning:layoutItem>
        <lightning:layoutItem size="4" flexibility="grow" 
                              padding="around-small">         
            {!v.column2}
        </lightning:layoutItem>
        <lightning:layoutItem size="4" flexibility="grow" 
                              padding="around-small">
            {!v.column3}
        </lightning:layoutItem>
      </lightning:layout>


        <lightning:layoutItem size="8" flexibility="grow" 
                              padding="around-small">
            {!v.column4}
        </lightning:layoutItem>

   </div> 
</aura:component>

Any ideas on how to create this with Lightning Grid?

4

SLDS doesn't have a provision for multi-row cells. However, you can do this with a combination of nested grids:

<aura:application extends="force:slds">
    <lightning:layout>
        <lightning:layoutItem size="8">
            <lightning:layout multipleRows="true">
                <lightning:layoutItem size="12">
                    Section A
                </lightning:layoutItem>
                <lightning:layoutItem size="6">
                    Section C
                </lightning:layoutItem>
                <lightning:layoutItem size="6">
                    Section D
                </lightning:layoutItem>
            </lightning:layout>
        </lightning:layoutItem>
        <lightning:layoutItem size="4">
            Section B
        </lightning:layoutItem>
    </lightning:layout>
</aura:application>
  • Worked great, thanks – Bobbygllh Apr 11 at 20:03

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.