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 attribute values.
horizontalAlignSpread layout items out horizontally based on the following values.
Spread layout items out vertically based on the following values.
Pull layout items to the layout boundaries based on the following values. If padding is used on layout items, this attribute pulls 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.
<aura:component> <div> <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>
Attribute Name | Attribute Type | Description | Required? |
---|---|---|---|
body | Component[] | Body of the layout component. | |
class | String | A CSS class for the outer element, in addition to the component's base classes. | |
title | String | Displays tooltip text when the mouse moves over the element. | |
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. |