---
schema_version: "1"
id: 0e49ebc496c1580ec1580befdb9dd77291f7a536c64f3aa07090b7077c8996a1
title: Layout
collection: developer
version: current
locale: en-us
portal_url: https://docs.salesforce.com/developer/current/en-us/lightning-base-components/lightning-design-system/guides/lwc/components/lightning/layout/lightning-layout.md
canonical_url: https://developer.salesforce.com/docs/platform/lightning-component-reference/guide/lightning-layout.html
source_site: developer.salesforce.com
content_type: documentation
content_hash: 2700e084fd2a88a439d8ec2795ea5b967e15623ea1c62ec88fc812999f274478
products:
  - Lightning Component Reference
---

# Layout

**`lightning-layout`**

Represents a responsive grid system for arranging containers on a page.

**For Use In**

Lightning Experience, Experience Builder Sites, Salesforce Mobile App, Lightning Out (Beta), Standalone Lightning App, Mobile Offline

::::::tabset{tabs='["Example", "Develop", "Specifications"]'}

:::::tab

::component-playground{component="layout" model="lwc" namespace="lightning"}


:::::

:::::tab

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.

## Design

`lightning-layout` implements styling from the [grid utility classes](https://lightningdesignsystem.com/utilities/grid/) in the Lightning Design System.

|                | SLDS 1                                                                                                                                | SLDS 2                                                                                                          |
| :------------- | :------------------------------------------------------------------------------------------------------------------------------------ | :-------------------------------------------------------------------------------------------------------------- |
| **Design**     | [Utility Classes (Grid)](https://v1.lightningdesignsystem.com/utilities/grid/)                                                        | [Utility Classes (Grid)](https://www.lightningdesignsystem.com/2e1ef8501/p/61d07d-grid)                         |
| **For Use In** | Lightning Experience, Experience Builder sites, Salesforce mobile app, Lightning Out (Beta), Standalone Lightning app, Mobile Offline | [Lightning Experience](https://help.salesforce.com/s/articleView?id=xcloud.customize_ui_enhancedlex.htm&type=5) |

## Create Columns

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

<!-- prettier-ignore-start -->
```html
<template>
    <div class="c-container">
        <lightning-layout horizontal-align={horizontalAlign}>
            <lightning-layout-item flexibility="auto" padding="around-small">
                1
            </lightning-layout-item>
            <lightning-layout-item flexibility="auto" padding="around-small">
                2
            </lightning-layout-item>
            <lightning-layout-item flexibility="auto" padding="around-small">
                3
            </lightning-layout-item>
            <lightning-layout-item flexibility="auto" padding="around-small">
                4
            </lightning-layout-item>
        </lightning-layout>
    </div>
</template>
```
<!-- prettier-ignore-end -->

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

```javascript
import { LightningElement, api } from "lwc";

export default class MyLayout extends LightningElement {
  @api horizontalAlign = "space";
}
```

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

<!-- prettier-ignore-start -->
```html
<lightning-layout>
    <lightning-layout-item size="4"> Column 1 content </lightning-layout-item>
    <lightning-layout-item size="8"> Column 2 content </lightning-layout-item>
</lightning-layout>
```
<!-- prettier-ignore-end -->

For more information, see the [SLDS grid utility classes](https://lightningdesignsystem.com/utilities/grid/), and [SLDS sizing utility classes](https://v1.lightningdesignsystem.com/utilities/sizing/).

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

## `horizontal-align`

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.

## `vertical-align`

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-to-boundary`

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.

## Usage Considerations

This example creates the same layout shown in [Create Columns](#create-columns),
which creates two columns with fixed widths.

<!-- prettier-ignore-start -->
```html
<div class="slds-grid">
    <div class="slds-col slds-size_1-of-3">Column 1 content</div>
    <div class="slds-col slds-size_2-of-3">Columns 2 content</div>
</div>
```
<!-- prettier-ignore-end -->


:::::

:::::tab
::component-specification{component="layout" model="lwc" namespace="lightning"}

:::::

::::::