Layout / Layout Item generator
lightning-layout and lightning-layout-item are the standard responsive grid for arranging cards, form sections and dashboard tiles without hand-rolled flexbox or floats. Preview column count, gap and wrapping behavior before you commit a page structure.
Your changes autosave in this browser, and the link above reproduces this exact configuration for anyone you send it to.
Live preview
Generated code
<template>
<lightning-layout multiple-rows="false" horizontal-align="stretch" class="studio-layout">
<lightning-layout-item size="4" padding="around-small" class="studio-layout__item">
<div class="studio-layout__block"></div>
</lightning-layout-item>
<lightning-layout-item size="4" padding="around-small" class="studio-layout__item">
<div class="studio-layout__block"></div>
</lightning-layout-item>
<lightning-layout-item size="4" padding="around-small" class="studio-layout__item">
<div class="studio-layout__block"></div>
</lightning-layout-item>
</lightning-layout>
</template>Design tips for layout / layout items
- Stick to Salesforce’s 12-unit column system (via the size attribute) even in this simplified 1–4-column preview, so it maps cleanly onto real lightning-layout-item sizing.
- Enable "wrap onto multiple rows" for any layout that needs to work on narrower App Page regions, not just full-width desktop.
- Use consistent gap sizing across every layout in your app — mixing gap scales is one of the fastest ways to make a page feel unpolished.