Kdtyjb

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)

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?

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>