Etydhv

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>