---
schema_version: "1"
id: cf48d19db4233ab836d23e31aebae629985a22a3de1eb64562cf757418c9c89f
title: Layout Item
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/layoutItem/lightning-layout-item.md
canonical_url: https://developer.salesforce.com/docs/platform/lightning-component-reference/guide/lightning-layout-item.html
source_site: developer.salesforce.com
content_type: documentation
content_hash: 4e44553a28931a5c723b74685ff2eeefba4530aacb1c6dc80fc1ceae89d0a582
products:
  - Lightning Component Reference
---

# Layout Item

**`lightning-layout-item`**

The basic element in a lightning-layout component. A layout item groups information together to define visual grids, spacing, and sections.

**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="layoutItem" model="lwc" namespace="lightning"}


:::::

:::::tab

A `lightning-layout-item` defines content within `lightning-layout`. You
can arrange one or more `lightning-layout-item` components inside `lightning-layout`.

The `lightning-layout-item` components must be adjacent, with no other components or expressions between them.

Use the attributes
of `lightning-layout-item` to configure the size of the layout item,
and change how the layout changes on different device sizes.

The layout system is mobile-first. Typically, the `small-device-size` attribute indicates a smart phone,
`medium-device-size` indicates a tablet, and `large-device-size` indicates a desktop or larger device.

If you specify the `small-device-size`, `medium-device-size`, or `large-device-size` attributes, you must also
specify the `size` attribute.

If you specify the `size` and `small-device-size`
attributes, the `size` attribute applies to small mobile
phones, and the `small-device-size` applies to smart phones. The device sizing
attributes are additive and apply to devices of the specified size and larger. For
example, if you set `medium-device-size=10` and don't set `large-device-size`, then
the `medium-device-size` setting applies to tablets, desktops, and larger
devices. You also set `size` to apply to devices smaller than tablets.

## Design

Use `lightning-layout-item` within `lightning-layout`, which 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) |

For general information on sizing, see [Lightning Design System](https://v1.lightningdesignsystem.com/utilities/sizing/#overview).

## Create Layout Items

Use the `flexibility` attribute to specify how the layout item adapts to the size of its container.
With default attribute values of size and flexibility, layout items take the size of their content and don't
occupy the entire width of the container.

Here’s an example that uses default values.

<!-- prettier-ignore-start -->
```html
<template>
    <div>
        <lightning-layout>
            <lightning-layout-item padding="around-small">
                <div>1</div>
            </lightning-layout-item>
            <lightning-layout-item padding="around-small">
                <div>2</div>
            </lightning-layout-item>
            <lightning-layout-item padding="around-small">
                <div>3</div>
            </lightning-layout-item>
            <lightning-layout-item padding="around-small">
                <div>4</div>
            </lightning-layout-item>
        </lightning-layout>
    </div>
</template>
```
<!-- prettier-ignore-end -->

## Usage Considerations

This component has usage differences from its Aura counterpart. See [Base Components: Aura Vs Lightning Web Components](https://developer.salesforce.com/docs/platform/lwc/guide/migrate-map-aura-lwc-components) in the Lightning Web Components Developer Guide.


:::::

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

:::::

::::::