Lightning Components · June 28, 2023

How to Use lightning:layout and lightning:layoutItem

lightning:layout is a flexible grid system for arranging containers within a Salesforce Lightning page. It simplifies responsive design by replacing manual div grids with a mobile-first approach that adapts automatically across devices.

lightning:layout Attributes

horizontalAlign

Controls horizontal spacing of layout items.

spacespreadcenterend

verticalAlign

Manages vertical alignment of layout items.

startcenterendstretch

pullToBoundary

Pulls elements to container edges by applying negative margins.

small (−12px)medium (−16px)large (−24px)

multipleRows

When true, child elements wrap to the next line when exceeding layout width. Defaults to false.

truefalse

lightning:layoutItem Attributes

lightning:layoutItem is the basic container element inside a layout. It controls sizing across device breakpoints.

size

Divides the viewport into 12 columns. Values range from 1–12. A size of 6 takes up half the width.

smallDeviceSize

Overrides size for tablets and above.

mediumDeviceSize

Overrides size for larger tablets and above.

largeDeviceSize

Overrides size for desktop and above.

flexibility

Controls how items absorb or shrink available space. Options: auto, shrink, grow, none.

padding

Applies spacing inside the layout item. Options: horizontal-small through around-large.

Responsive Grid Example

<lightning:layout multipleRows="true">
  <lightning:layoutItem
    size="12"
    smallDeviceSize="6"
    largeDeviceSize="4"
    padding="around-small">
    <!-- Content here -->
  </lightning:layoutItem>
</lightning:layout>

This creates a card that is full-width on mobile, half-width on tablet, and one-third on desktop — all without custom CSS.

Need help?

Get expert Salesforce development support

Our Lightning component developers build custom Salesforce UIs for enterprise clients. Book a free call to discuss your project.

Book a Free Call