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.

Create the content of the layout by including lightning:layoutItem components within lightning:layout.

This component implements styling from the grid utility classes in the Lightning Design System.

Customize the layout by setting the following attribute values.

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.

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.

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 layout items. For instance, if lightning:layoutItem padding="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.

lightning:layout enables you to create several types of columns.

• Flexible widths that adjust based on their content
• Fixed widths that take up a percentage of the container

Create a simple layout by enclosing single or multiple lightning:layoutItem components within lightning:layout. lightning:layoutItem creates a column within lightning:layout.

To create columns with widths that are based on their content, use flexibility="auto". The horizontalAlign attribute determines how to spread the layout items horizontally. For example, space evenly distributes columns horizontally with an equal amount of space separating the columns.

Here is an example that creates columns with flexible widths. The horizontal alignment is set to space, which evenly distributes columns horizontally with an equal amount of space separating the columns.

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>

To create columns with fixed widths, use the size attribute on lightning:layoutItem. For example, to create two columns where the width of the first column is 33% of the grid container and the second column is 66% of the grid container, use size="4" and size="8".

1<lightning:layout>
2  <lightning:layoutItem size="4"> Column 1 content </lightning:layoutItem>
3  <lightning:layoutItem size="8"> Column 2 content </lightning:layoutItem>
4</lightning:layout>

For more information, see the SLDS grid utility classes.