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> ...

Get Learning Salesforce Lightning Application Development now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.