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.

1<aura:component>
2  <div>
3    <lightning:layout>
4      <lightning:layoutItem padding="around-small">
5        <div>1</div>
6      </lightning:layoutItem>
7      <lightning:layoutItem padding="around-small">
8        <div>2</div>
9      </lightning:layoutItem>
10      <lightning:layoutItem padding="around-small">
11        <div>3</div>
12      </lightning:layoutItem>
13      <lightning:layoutItem padding="around-small">
14        <div>4</div>
15      </lightning:layoutItem>
16    </lightning:layout>
17  </div>
18</aura:component>

Attributes

Name	Description	Type
alignmentBump	Specifies a direction to bump the alignment of adjacent layout items. Allowed values are left, top, right, bottom.	String
body	The body of the component. In markup, this is everything in the body of the tag.	Aura.Component[]
class	A CSS class for the outer element, in addition to the component's base classes.	String
flexibility	Make the item fluid so that it absorbs any extra space in its container or shrinks when there is less space. Allowed values are: auto (columns grow or shrink equally as space allows), shrink (columns shrink equally as space decreases), no-shrink (columns don't shrink as space reduces), grow (columns grow equally as space increases), no-grow (columns don't grow as space increases), no-flex (columns don't grow or shrink as space changes). Use a comma-separated value for multiple options, such as 'auto, no-shrink'.	Object
largeDeviceSize	If the viewport is divided into 12 parts, this attribute indicates the relative space the container occupies on device-types larger than desktop. It is expressed as an integer from 1 through 12.	Integer
mediumDeviceSize	If the viewport is divided into 12 parts, this attribute indicates the relative space the container occupies on device-types larger than tablet. It is expressed as an integer from 1 through 12.	Integer
padding	Sets padding to either the right and left sides of a container, or all sides of a container. Allowed values are horizontal-small, horizontal-medium, horizontal-large, around-small, around-medium, around-large.	String
size	If the viewport is divided into 12 parts, size indicates the relative space the container occupies. Size is expressed as an integer from 1 through 12. This applies for all device-types.	Integer
smallDeviceSize	If the viewport is divided into 12 parts, this attribute indicates the relative space the container occupies on device-types larger than mobile. It is expressed as an integer from 1 through 12.	Integer
title	Displays tooltip text when the mouse moves over the element.	String

Layout Item

Attributes

Lightning Component Reference