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>
                                 Test SideBar Content
                            </p>
                        </div>
                    </Lightning:layoutItem>
                    <Lightning:layoutItem padding="around-small" size="6">
                        <div class="page-section page-main">
                            <h2>Main</h2>
                            <p>
                               Main Page Content
                            </p>
                        </div>
                    </Lightning:layoutItem>
                    <Lightning:layoutItem padding="around-small" size="3">
                        <div class="page-section page-right">
                            <h2>Right Sidebar</h2>
                            <ul>
                                <li><a href="#">Archive 1</a>
                                </li>
                                <li><a href="#">Archive 2</a>
                                </li>
                                <li><a href="#">Archive 3</a>
                                </li>
                                <li><a href="#">Archive 4</a>
                                </li>
                                <li><a href="#">Archive 5</a>
                                </li>
                            </ul>
                        </div>
                    </Lightning:layoutItem>
                </Lightning:layout>
            </Lightning:layoutItem>
            <Lightning:layoutItem flexibility="auto" padding="around-small" size="12">
                <div class="page-footer page-section">
                    <h2>Footer</h2>
                </div>
            </Lightning:layoutItem>
        </Lightning:layout>
    </div>
</aura:application>

The CSS code should be placed in the Style file of the component bundle. The CSS code is as follows:

.THIS.c-container {
    border: 1px solid #d8dde6;
    margin: 10px 0 20px 0;
}
.THIS.page-section {
    border: solid 1px #ccc;
    padding: 1rem;
}
.THIS.page-header,
.THIS.page-footer {
    height: 50px;
}
.THIS.page-main {
    background: #f8f8f8;
}
.THIS.page-left,
.THIS.page-right {
    background: #f0efef;
}

The output will as follows: