Learning Salesforce Lightning Application Development

Nested page layout using Lightning Layouts

The following example shows how one can nest Lightning:layoutItem and Lightning layout to create various layouts. The following example shows how you can add custom CSS to the application using the Style file of the component bundle. The markup code is as follows:

<aura:application extends="force:slds">    <div class="c-container">        <Lightning:layout multipleRows="true">            <Lightning:layoutItem padding="around-small" size="12">                <div class="page-section page-header">                    <h2>Header</h2>                </div>            </Lightning:layoutItem>            <Lightning:layoutItem padding="around-small" size="12">                <Lightning:layout>                    <Lightning:layoutItem padding="around-small" size="3">                        <div class="page-section page-right">                            <h2>Left Sidebar</h2> <p> ...