Start with the right component syntax
lightning:layout and lightning:layoutItem belong to Aura. In Lightning Web Components, their equivalents are lightning-layout and lightning-layout-item. Keep examples from the two frameworks separate: an Aura attribute such as smallDeviceSize uses a different spelling from the LWC small-device-size attribute.
Salesforce: Aura layout component reference
Choose layout alignment and wrapping
| Attribute | Purpose |
|---|---|
| horizontalAlign | center, space, spread or end control horizontal placement. |
| verticalAlign | start, center, end or stretch control vertical alignment. |
| multipleRows | Set true when items should wrap to another row. |
| pullToBoundary | small, medium or large counter matching item padding at the edges. |
Use spacing deliberately. Padding adds room inside each item; alignment distributes items within the layout. If the labels seem far apart, check both settings before adding more CSS.
Set the base size before device overrides
The layout divides available width into 12 columns. A size of 12 takes a full row; 6 uses half; 4 uses one third. Include size whenever you specify a device size. Larger breakpoints inherit the last applicable setting unless you override it.
| Attribute | Applies from |
|---|---|
| size | The base size, including screens narrower than 480px. |
| smallDeviceSize | 480px and wider. |
| mediumDeviceSize | 768px and wider. |
| largeDeviceSize | 1024px and wider. |
Salesforce: layout item sizing
Salesforce: grids and responsive layout breakpoints
A responsive three-card example
This Aura component stacks the cards on narrow screens, uses two columns from the small breakpoint and three from the large breakpoint. At two columns, the third card wraps. Replace the sample content with your own UI.
Aura component markup
<aura:component>
<lightning:layout multipleRows="true">
<lightning:layoutItem size="12" smallDeviceSize="6"
largeDeviceSize="4" padding="aroundSmall">
<div class="slds-box">Applications</div>
</lightning:layoutItem>
<lightning:layoutItem size="12" smallDeviceSize="6"
largeDeviceSize="4" padding="aroundSmall">
<div class="slds-box">Documents</div>
</lightning:layoutItem>
<lightning:layoutItem size="12" smallDeviceSize="6"
largeDeviceSize="4" padding="aroundSmall">
<div class="slds-box">Follow-up</div>
</lightning:layoutItem>
</lightning:layout>
</aura:component>Notice padding="aroundSmall" in the Aura example. Do not substitute an LWC-style hyphenated value into this markup. For a different layout, change the column sizes before reaching for fixed pixel widths.
Test the content, not just empty boxes
- Try long account names, error messages and realistic field labels.
- Check the component inside the actual Lightning page region, not only a full-width demo.
- Confirm controls remain reachable by keyboard and usable on the Salesforce mobile app.
- Check narrow screens and browser zoom for clipped text or page-wide scrolling.
- If a row will not wrap, check multipleRows and the total column sizes.
Responsive sizing controls the grid. It does not automatically make a wide table or a fixed-width child element fit. Inspect the content inside an overflowing item as well as the layout attributes.
Need help applying this to your Salesforce org?
Bring one example of the process or component you want to improve. We can discuss the requirement, the systems involved and the next step toward a scoped approach and estimate.