4列カラムのページレイアウトを作る

確か、昔見たSalesforceのブログにやり方が書いてあったんですが... と思って

その時は3カラムレイアウト。3列ができれば、4列も可能ですよって回答したのですが　気に入らんかったようです。

仕方ないので実際に動くもので回答しました。

少し余白の設定は必要そうな気がしますが...

テンプレート用のコンポーネント

<aura:component implements="lightning:homeTemplate" access="global" >
    <aura:attribute name="first" type="Aura.Component[]" />
    <aura:attribute name="second" type="Aura.Component[]" />
    <aura:attribute name="third" type="Aura.Component[]" /> 
    <aura:attribute name="fourth" type="Aura.Component[]" /> 
    <aura:attribute name="all" type="Aura.Component[]" /> 
    
    <div class="slds-grid slds-wrap">
        <div class="slds-col slds-size_1-of-4">
            <span>{!v.first}</span>
        </div>
        <div class="slds-col slds-size_1-of-4">
            <span>{!v.second}</span>
        </div>
        <div class="slds-col slds-size_1-of-4">
            <span>{!v.third}</span>
        </div>
		<div class="slds-col slds-size_1-of-4">
            <span>{!v.fourth}</span>
        </div>      
        
        <div class="slds-col slds-size_4-of-4">
            <span>{!v.all}</span>
        </div>   
    </div>
</aura:component>

デザイン

<design:component label="My Four column Page">
    <flexipage:template>
        
        <flexipage:region name="first" defaultWidth="SMALL">
            <flexipage:formfactor type="MEDIUM" width="SMALL"/>
        </flexipage:region>
        
        <flexipage:region name="second" defaultWidth="SMALL">
            <flexipage:formfactor type="MEDIUM" width="SMALL"/>
        </flexipage:region>
        
        <flexipage:region name="third" defaultWidth="SMALL">
            <flexipage:formfactor type="MEDIUM" width="SMALL"/>
        </flexipage:region>
        
        <flexipage:region name="fourth" defaultWidth="SMALL">
            <flexipage:formfactor type="MEDIUM" width="SMALL"/>
        </flexipage:region>
        
        <flexipage:region name="all" defaultWidth="SMALL">
            <flexipage:formfactor type="MEDIUM" width="SMALL"/>
        </flexipage:region>
        
    </flexipage:template>
</design:component>

さて、ベストアンサーは頂けるかな？

Create section grid for page layout