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?

1 Answer 1

6

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>
1
  • Worked great, thanks
    – Bobbygllh
    Apr 11, 2019 at 20:03

You must log in to answer this question.

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