Sign Up ›

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
Daniel BleasdaleDaniel Bleasdale 

Help with a basic Lightning Layout for Lightning App Builder

Basically I can figure out what cose I must use to get a layout that represents this :-
User-added image
With One row acroos the top and two columns below.
Need a hand structuring the code:-
User-added image 
<aura:component implements="lightning:homeTemplate" access="global" >
    <aura:attribute name="center" type="Aura.Component[]" />
    <aura:attribute name="left" type="Aura.Component[]" />
    <aura:attribute name="right" type="Aura.Component[]" />
    
    <div>
    	<lightning:layout >
            
            <lightning:layoutitem 
                          class="slds_m-center_small">
            	{v.center}
            </lightning:layoutitem>
            
        	<lightning:layoutitem flexibility="grow" 
                                  class="slds-m-right_small">
            	{!v.left}
            </lightning:layoutitem>
            
            <lightning:layoutitem size="{! $Browser.isDesktop ? '3' : '6' }"
                                  class="slds-m-left_small">
            	{!v.right}
            </lightning:layoutitem>
        </lightning:layout>
    </div>
    
</aura:component>
  
<design:component label="Two column Page">
	<flexipage:template>
        
        <flexipage:region name="center" defaultWidth="SMALL">
            <flexipage:formfactor type="MEDIUM" width="LARGE"/>
        </flexipage:region>
        
    <flexipage:region name="left" defaultWidth="LARGE">
        <flexipage:formfactor type="MEDIUM" width="SMALL"/>
        </flexipage:region>
        
        <flexipage:region name="right" defaultWidth="SMALL">
            <flexipage:formfactor type="MEDIUM" width="SMALL"/>
        </flexipage:region>
        
    </flexipage:template>
</design:component>

Im supprised its not an option for the homepage layout.

Any help is much appreciated thanks Dan.
Best Answer chosen by Daniel Bleasdale
Alain CabonAlain Cabon
Hi,

<lightning:layout >  and  <lightning:layoutitem> are not mandatory for a template.

Just use  <div class="slds-grid slds-wrap">, it is sufficient
and you have many samples here: https://www.lightningdesignsystem.com/utilities/grid/ 
<aura:component implements="lightning:homeTemplate" access="global" >

    <aura:attribute name="center" type="Aura.Component[]" />
    <aura:attribute name="left" type="Aura.Component[]" />
    <aura:attribute name="right" type="Aura.Component[]" />
    
    <div class="slds-grid slds-wrap">
        <div class="slds-col slds-size_1-of-1">
            <span>{!v.center}</span>
        </div>
        <div class="slds-col slds-size_1-of-2">
            <span>{!v.left}</span>
        </div>
        <div class="slds-col slds-size_1-of-2">
            <span>{!v.right}</span>
        </div>
    </div>
</aura:component>


User-added image