sldsgrid.html

<aura:component >

    <ltng:require styles="/resource/slds102/assets/styles/salesforce-lightning-design-system-ltng.css"/>	
    
    <div class="slds">
        <div class="slds-grid slds-wrap slds-grid--vertical-stretch">
            <div class="slds-col slds-col-rule--bottom slds-size--1-of-1" style="height:300px;">
                Column 1
            </div>
            <div class="slds-col slds-col-rule--right slds-size--2-of-3" style="height:600px;">
                <div class="slds-grid slds-wrap slds-grid--vertical-stretch">
                    <div class="slds-col slds-col-rule--right slds-col-rule--bottom slds-size--1-of-1" style="height:300px;">
                        Column 2	
                    </div>
                    <div class="slds-col slds-col-rule--right slds-col-rule--bottom slds-size--1-of-1">
                        <div class="slds-grid slds-wrap slds-grid--vertical-stretch" style="height:300px;">
                            <div class="slds-col slds-size--1-of-2 slds-col-rule--right" style="height:300px;">Column 4</div>
                            <div class="slds-col slds-size--1-of-2" style="height:300px;">Column 5</div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="slds-col slds-col-rule--left slds-col-rule--bottom slds-size--1-of-3">
                Column 3
            </div>
        </div>
    </div>  
</aura:component>