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.

horizontalAlign

Spread layout items out horizontally based on the following values.

  • center: Appends the slds-grid--align-center class to the grid. This attribute orders the layout items into a horizontal line without any spacing, and places the group into the center of the container.
  • space: Appends the slds-grid--align-space class to the grid. The layout items are spaced horizontally across the container, starting and ending with a space.
  • spread: Appends the slds-grid--align-spread class to the grid. The layout items are spaced horizontally across the container, starting and ending with a layout item.
  • end: Appends the slds-grid--align-end class to the grid. The layout items are grouped together and aligned horizontally on the right side of the container.
verticalAlign

Spread layout items out vertically based on the following values.

  • start: Appends the slds-grid--vertical-align-start class to the grid. The layout items are aligned at the top of the container.
  • center: Appends the slds-grid--vertical-align-center class to the grid. The layout items are aligned in the center of the container.
  • end: Appends the slds-grid--vertical-align-end class to the grid. The layout items are aligned at the bottom of the container.
  • stretch: Appends the slds-grid--vertical-stretch class to the grid. The layout items extend vertically to fill the container.
pullToBoundary

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".

  • small: Appends the slds-grid--pull-padded class to the grid.
  • medium: Appends the slds-grid--pull-padded-medium class to the grid.
  • large: Appends the slds-grid-pull-padded-large class to the grid.

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.