lightning:layout

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.

The layout can be customized by setting the following attributes.

Use the class or multipleRows attributes to customize the styling in other ways.

A simple layout can be achieved by enclosing layout items within lightning:layout. Here is an example.

<aura:component>
    <div class="c-container">
        <lightning:layout horizontalAlign="space">
            <lightning:layoutItem flexibility="auto" padding="around-small">
                1
            </lightning:layoutItem>
            <lightning:layoutItem flexibility="auto" padding="around-small">
                2
            </lightning:layoutItem>
            <lightning:layoutItem flexibility="auto" padding="around-small">
                3
            </lightning:layoutItem>
            <lightning:layoutItem flexibility="auto" padding="around-small">
                4
            </lightning:layoutItem>
        </lightning:layout>
    </div>
</aura:component>
        

Attributes

Attribute Name Attribute Type Description Required?
body Component[] Body of the layout component.
class String A CSS class that is applied to the outer element. This style is in addition to base classes output by the component.
horizontalAlign String Determines how to spread the layout items horizontally. The alignment options are center, space, spread, and end.
multipleRows Boolean Determines whether to wrap the child items when they exceed the layout width. If true, the items wrap to the following line. This value defaults to false.
pullToBoundary String Pulls layout items to the layout boundaries and corresponds to the padding size on the layout item. Possible values are small, medium, or large.
verticalAlign String Determines how to spread the layout items vertically. The alignment options are start, center, end, and stretch.