Lightning Layout – Align Bottom

lightning-aura-componentslightning-layoutssldsslds-grid

I'm trying to see if this layout is possible with lightning layout without thinkering about the positioning via CSS. Basically, what I'm trying to do is to line up the content C layout with the green component (fixed height/width). Something like below screenshot. I tried alignmentBump="end" and played around slds-grid_vertical-align-end and slds-align-bottom but I'm not able to achieve what I am trying to do. It sounds simple, and I'm sure i'm just missing something. Any guidance would be appreciated.

enter image description here

<lightning:layout multipleRows="true" verticalAlign="stretch">
   <lightning:layoutItem size="12">
     Title Header
   </lightning:layoutItem> 
   <lightning:layoutItem size="4">
       <lightning:layout multipleRows="true">
             <lightning:layoutItem size="12">
                 A
             </lightning:layoutItem>
             <lightning:layoutItem size="12">
                 B
             </lightning:layoutItem>
             <lightning:layoutItem size="12" alignmentBump="bottom">
                 C <!-- This content, should align at the bottom of the fixedHeightWidth Component -->
             </lightning:layoutItem>
       </lightning:layout>
   </lightning:layoutItem> 
   <lightning:layoutItem size="8">
      <c:fixedHeightWidthComponent />
   </lightning:layoutITem>
</lightning:layout>

Best Answer

The alignmentBump="bottom" should be on the item containing B, it has to bump the next item to the bottom. Besides that, the inner lightning:layout should get the slds-grid_vertical class and a height of 100% for this to work.

I made this as an example to test. It's lwc though, not aura, but it should work the same:

<template>
    <lightning-layout multiple-rows="true" vertical-align="stretch">
        <lightning-layout-item size="12">
            <div style="background-color: blue">Title Header</div>
        </lightning-layout-item>
        <lightning-layout-item size="4">
            <lightning-layout multiple-rows="true" class="slds-grid_vertical" style="height: 100%">
                <lightning-layout-item size="12"><span style="background-color: orange">A</span></lightning-layout-item>
                <lightning-layout-item size="12" alignment-bump="bottom"><span style="background-color: orange">B</span></lightning-layout-item>
                <lightning-layout-item size="12"><span style="background-color: orange">C</span> </lightning-layout-item>
            </lightning-layout>
        </lightning-layout-item>
        <lightning-layout-item size="8">
            <div style="height: 400px; background-color: green;"></div>
        </lightning-layout-item>
    </lightning-layout>
</template>
Related Topic