Layout Item

A lightning-layout-item defines content to display 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 is configured 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'd also have to set size to apply to devices smaller than tablets.

For general information on sizing, see Lightning Design System.

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 is an example using default values.

This component has usage differences from its Aura counterpart. See Base Components: Aura Vs Lightning Web Components in the Lightning Web Components Developer Guide.