+ Start a Discussion
HNT_NeoHNT_Neo 

Can I create a 3 column Lightning homepage layout?

I've managed to create a lightning homepage component with 1 column using the below component, style, and design elements. If I re-use the {!v.main} in the component page more than once, I receive an error. 

I want to be able to create 3 horizontal sections as shown in the last image below. Is it possible? 

COMPONENT
<aura:component implements="lightning:homeTemplate">
    <aura:attribute name="main" type="Aura.Component[]" /> 
    <div>
        <lightning:layout horizontalAlign="spread">
            {!v.main}
        </lightning:layout>
    </div>
</aura:component>

DESIGN
<flexipage:template >
        <flexipage:region name="main" defaultWidth="Xlarge">
        </flexipage:region>
    </flexipage:template>

SVG
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="120px" height="120px" viewBox="0 0 120 120" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
	<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
		<path d="M120,108 C120,114.6 114.6,120 108,120 L12,120 C5.4,120 0,114.6 0,108 L0,12 C0,5.4 5.4,0 12,0 L108,0 C114.6,0 120,5.4 120,12 L120,108 L120,108 Z" id="Shape" fill="#2A739E"/>
		<path d="M77.7383308,20 L61.1640113,20 L44.7300055,63.2000173 L56.0543288,63.2000173 L40,99.623291 L72.7458388,54.5871812 L60.907727,54.5871812 L77.7383308,20 Z" id="Path-1" fill="#FFFFFF"/>
	</g>
</svg>

This is the error I receive
User-added image

This is the layout I can render but doesn't work if I add components to it
User-added image
Best Answer chosen by HNT_Neo
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/

COMPONENT​
<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-3">
            <span>{!v.left}</span>
        </div>
        <div class="slds-col slds-size_1-of-3">
            <span>{!v.center}</span>
        </div>
        <div class="slds-col slds-size_1-of-3">
            <span>{!v.right}</span>
        </div>        
    </div>
</aura:component>

DESIGN​
 
<design:component label="My Two column Page">
    <flexipage:template>
        
        <flexipage:region name="left" defaultWidth="SMALL">
            <flexipage:formfactor type="MEDIUM" width="SMALL"/>
        </flexipage:region>
        
        <flexipage:region name="center" defaultWidth="SMALL">
            <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>

User-added image


 

All Answers

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/

COMPONENT​
<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-3">
            <span>{!v.left}</span>
        </div>
        <div class="slds-col slds-size_1-of-3">
            <span>{!v.center}</span>
        </div>
        <div class="slds-col slds-size_1-of-3">
            <span>{!v.right}</span>
        </div>        
    </div>
</aura:component>

DESIGN​
 
<design:component label="My Two column Page">
    <flexipage:template>
        
        <flexipage:region name="left" defaultWidth="SMALL">
            <flexipage:formfactor type="MEDIUM" width="SMALL"/>
        </flexipage:region>
        
        <flexipage:region name="center" defaultWidth="SMALL">
            <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>

User-added image


 
This was selected as the best answer
HNT_NeoHNT_Neo
Thanks Alain! This worked out great.
I'm looking for a 9 box layout for a custom lightning component page. 
I created a new post here if interested in helping out: https://developer.salesforce.com/forums#!/feedtype=SINGLE_QUESTION_DETAIL&dc=Developer_Forums&criteria=OPENQUESTIONS&id=9060G0000005lljQAA
Cory IlerCory Iler
When using this exact code as above I get this error. Any idea why?

Failed to save HomePageSingleColumnTemplate.cmp: c:HomePageSingleColumnTemplate:20,2: ParseError at [row,col]:[21,2] Message: The markup in the document following the root element must be well-formed.: Source
kjunkjun
Can you post your code? 
grace morezgrace morez
I am alos looking For 3 column Lightning homepage layout For my site https://www.techzed.net/
gta loversgta lovers
anisha foxanisha fox
Lyricsgurujii (https://lyricsgurujii.blogspot.com/) is an really best for finding lyrics of all type language
Sam KarnSam Karn
Apkmanager tool download  https://www.apkmanager.co/apkmanager
Ranjan Kumar 78Ranjan Kumar 78
Best 49000+ Attitude Status in Hindi Latest (https://www.whatsapp-dp-images.in/attitude-status-in-hindi/)