Layout Item

lightning:layoutItem

The basic element of lightning:layout.

For Aura components only. For LWC development, use lightning-layout-item.

For Use In

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

A lightning:layoutItem defines content to display within lightning:layout. You can arrange one or more lightning:layoutItem components inside lightning:layout.

Use the attributes of lightning:layoutItem 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 smallDeviceSize attribute indicates a smart phone, mediumDeviceSize indicates a tablet, and largeDeviceSize indicates a desktop or larger device.

If you specify the smallDeviceSize, mediumDeviceSize, or largeDeviceSize attributes, you must also specify the size attribute.

If you specify the size and smallDeviceSize attributes, the size attribute applies to small mobile phones, and the smallDeviceSize applies to smart phones. The sizing attributes are additive and apply to devices of the specified size and larger. For example, if you set mediumDeviceSize=10 and don't set largeDeviceSize, then mediumDeviceSize 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.