Lightning - Layout and LayoutItem

Layout and LayoutItem

A lightning:layout is a flexible grid system for arranging containers within a page or inside another container. 
The default layout is mobile-first and can be easily configured to work on different devices. 

A lightning:layoutItem is the basic element within lightning:layout. 
You can arrange one or more layout items inside lightning:layout. 
The attributes of lightning:layoutItem enable you to configure the size of the layout item, 
and change how the layout is configured on different device sizes.

>> we need to use multipleRows="true" in order to get the benifit of lightning:layoutItem
>> default size is 12

Component
**********************************************************************************************
<aura:component >
	<lightning:layout multipleRows="true">
    	<lightning:layoutItem size="4" padding="around-medium">
            <div class="box">Layout Item 1</div>
        </lightning:layoutItem>
        <lightning:layoutItem size="4" padding="around-medium">
            <div class="box">Layout Item 1</div>
        </lightning:layoutItem>
        <lightning:layoutItem size="4" padding="around-medium">
            <div class="box">Layout Item 1</div>
        </lightning:layoutItem>
    </lightning:layout>
</aura:component>
**********************************************************************************************
Style
**********************************************************************************************
.THIS .box {
    border: 1px solid grey;
    background-color: yellow;
    text-align: center;
}
**********************************************************************************************