Represents a responsive grid system for arranging containers on a page. 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.

Sample Code:


<aura:component implements=”flexipage:availableForAllPageTypes” >
    <div class=”c-container”>
        <lightning:layout horizontalAlign=”center”>
            <lightning:layoutItem flexibility=”auto” padding=”around-small”>
                <ui:inputSelect multiple=”false”>
                    <ui:inputSelectOption label=”All Types” text=”” value=”true”/>
                </ui:inputSelect>
            </lightning:layoutItem>
            <lightning:layoutItem flexibility=”auto” padding=”around-small”>
                <button class=”slds-button slds-button_brand”>Search</button>
            </lightning:layoutItem>
            <lightning:layoutItem flexibility=”auto” padding=”around-small”>
    <ui:button label=”New”/>
            </lightning:layoutItem>
        </lightning:layout>
    </div>    

</aura:component>


Output: