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 you can configure the layout to adapt to different devices.

Create the content of the layout by including lightning-layout-item components within lightning-layout. You can place HTML tags and text between the lightning-layout-item components, but you can’t place other components or expressions between them.

lightning-layout implements styling from the grid utility classes in the Lightning Design System.

lightning-layout creates several types of columns for your content.

• 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-layout-item components within lightning-layout. lightning-layout-item creates a column within lightning-layout.

To create columns with widths that adjusts with the content, use flexibility="auto". The horizontal-align attribute determines how to spread the layout items horizontally.

Here’s an example that creates columns with flexible widths.

1<template>
2    <div class="c-container">
3        <lightning-layout horizontal-align={horizontalAlign}>
4            <lightning-layout-item flexibility="auto" padding="around-small">
5                1
6            </lightning-layout-item>
7            <lightning-layout-item flexibility="auto" padding="around-small">
8                2
9            </lightning-layout-item>
10            <lightning-layout-item flexibility="auto" padding="around-small">
11                3
12            </lightning-layout-item>
13            <lightning-layout-item flexibility="auto" padding="around-small">
14                4
15            </lightning-layout-item>
16        </lightning-layout>
17    </div>
18</template>

Set the horizontal alignment to space, which evenly distributes columns horizontally with an equal amount of space separating the columns.

1import { LightningElement, api } from "lwc";
2
3export default class MyLayout extends LightningElement {
4  @api horizontalAlign = "space";
5}

To create columns with fixed widths, use the size attribute on lightning-layout-item. 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-layout-item size="4"> Column 1 content </lightning-layout-item>
3    <lightning-layout-item size="8"> Column 2 content </lightning-layout-item>
4</lightning-layout>

For more information, see the SLDS grid utility classes, and SLDS sizing utility classes.

Customize the layout by setting the horizontal-align, vertical-align, and pull-to-boundary attributes.

Spread layout items out horizontally based on these 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 these 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 these values.

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

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-layout-item padding="horizontalSmall", choose pull-to-boundary="small".

Use the class or multiple-rows attributes to customize the styling in other ways.

This example creates the same layout shown in Create Columns, which creates two columns with fixed widths.

1<div class="slds-grid">
2    <div class="slds-col slds-size_1-of-3">Column 1 content</div>
3    <div class="slds-col slds-size_2-of-3">Columns 2 content</div>
4</div>