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
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.
Use lightning-layout-item within lightning-layout, which implements styling from the grid utility classes in the Lightning Design System.
| SLDS 1 | SLDS 2 | |
|---|---|---|
| Design | Utility Classes (Grid) | Utility Classes (Grid) |
| For Use In | Lightning Experience, Experience Builder sites, Salesforce mobile app, Lightning Out (Beta), Standalone Lightning app, Mobile Offline | Lightning Experience |
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’s an example that uses 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.