lightning:layout

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.

• horizontalAlign="center": This attribute orders the layout items into a horizontal line without any spacing, and places the group into the center of the container.
• horizontalAlign="space": The layout items are spaced horizontally across the container, starting and ending with a space.
• horizontalAlign="spread": The layout items are spaced horizontally across the container, starting and ending with a layout item.
• horizontalAlign="end": The layout items are grouped together and aligned horizontally on the right side of the container.
• verticalAlign="start": The layout items are aligned at the top of the container.
• verticalAlign="center": The layout items are aligned in the center of the container.
• verticalAlign="end": The layout items are aligned at the bottom of the container.
• verticalAlign="stretch": The layout items extend vertically to fill the container.
• pullToBoundary: If padding is used on layout items, this attribute will pull the elements on either side of the container to the boundary. Choose the size that corresponds to the padding on your layoutItems. For instance, if lightning:layoutItem="horizontalSmall", choose pullToBoundary="small".

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.

1<aura:component>
2    <div class="c-container">
3        <lightning:layout horizontalAlign="space">
4            <lightning:layoutItem flexibility="auto" padding="around-small">
5                1
6            </lightning:layoutItem>
7            <lightning:layoutItem flexibility="auto" padding="around-small">
8                2
9            </lightning:layoutItem>
10            <lightning:layoutItem flexibility="auto" padding="around-small">
11                3
12            </lightning:layoutItem>
13            <lightning:layoutItem flexibility="auto" padding="around-small">
14                4
15            </lightning:layoutItem>
16        </lightning:layout>
17    </div>
18</aura:component>

Attributes