Columns

The Columns component gives you powerful control over the layout and arrangement of your Dynamic Components.

The Columns component is a flexible container that arranges other Dynamic Components in responsive columns. Use it whenever you need record details next to a sidebar, KPIs in a row, side-by-side forms, or full-width hero sections that collapse on mobile.

Overview

The Columns component is the foundation of every responsive layout in the builder. You add it once, then configure each column individually. Columns can be Fixed (with a specific width) or Flexible (grow and shrink with available space), and you can override their size and order for each device — desktop, tablet, and mobile.

Quick Start: Build a Responsive 3-Column Record Layout in 3 Minutes

This walkthrough builds a layout that shows three columns side by side on desktop, two on tablet, and stacks them on mobile.

Add the Columns component to the Canvas

From the Component Library (left sidebar), drag the Columns component onto the Canvas.
In the Properties Panel (right), open the columns editor.
Click the + button three times to add three columns.

Set the Layout container settings

Select the parent Columns component on the Canvas, then in the Properties Panel:

Horizontal Alignment: Start
Vertical Alignment: Top
Allow Wrapping on Multiple Rows: ✅ checked

Why: Wrapping is what lets the third column drop to a new row on tablet, and all three stack on mobile. Without it, the columns stay on one line and shrink until they break.

Configure each column for desktop, tablet, and mobile

Click on Column 1 in the column editor. In the column popover:

Set Flexibility to Fixed.
Use the Device Size selector at the top of the popover to set sizes per device:
- Large (≥ 1024px — desktop): size 4
- Medium (≥ 768px — tablet): size 6
- Small (≥ 480px — small tablet/large phone): size 12
- All (< 480px — mobile): size 12

Repeat for Column 2 and Column 3 with the same values.

Why: The grid is 12 units wide. 4 = 33%, 6 = 50%, 12 = 100%. So each column takes a third on desktop, half on tablet (with the third wrapping below), and full width on mobile.

Drop content into each column

Drag any Avonni component (Text, Avatar, Data Table, Card, etc.) into each column.
Each column is a drop zone — components stack vertically inside

Save and Deploy

Click Save in the top right.
Click Deploy and add the component to a Lightning Page using the Lightning App Builder.

In the Lightning App Builder, drag the Avonni Dynamic Component onto the page, select the component you just built, and save.

Configuration

To configure the Columns component, select it on the canvas. The Edit Columns panel opens on the right with two tabs: Properties and Style. The Columns component has two levels of settings: the Layout container (the parent) and each Column (child). Select the Columns component on the Canvas to edit container settings; click an individual column to edit that column's settings.

Layout Container Settings

These settings apply to the entire row of columns. Find them on the Properties tab after selecting the Columns component.

Setting

Description

Options

Horizontal Alignment

Aligns the items along the horizontal axis. Only takes effect when the total column widths are less than the container. (Default: Start)

Start (left), Center, End (right), Space (equal space between), Spread (equal space around)

Vertical Alignment

Aligns the items along the vertical axis when columns have different heights. (Default: Top)

Top, Center, Bottom, Stretch (all columns match the tallest)

Allow Wrapping on Multiple Rows

Lets the items wrap to the next row when the available space is too small. Required for responsive behavior. (Default: off)

On / Off

Equal Heights

Forces all columns to match the height of the tallest one. Useful for card grids where each card should be the same size. (Default: off)

On / Off

Allow Wrapping on Multiple Rows is off by default

If your layout doesn't collapse on smaller screens, this is the first thing to check

Column Settings

Click any individual column in the column editor to open its settings popover. The settings change based on whether the column is Fixed or Flexible.

Flexibility Mode

The first choice for any column is whether its width is fixed or flexible.

Mode

Description

When to use

Fixed

The column takes a specific size, expressed as a number from 1 to 12 (grid fraction). 12 is full width, 6 is 50%, 4 is 33%.

Any time you want predictable widths — most production layouts.

Flexible

The column adjusts its width based on content and available space using flex behavior.

Headers with a logo on the left and actions on the right, or a sidebar that fills whatever space is left.

Flexibility Options (Flexible columns only)

When a column is set to Flexible, choose one of these behaviors:

Option

Behavior

Auto

The column takes the size its content needs.

Grow

The column expands to fill any extra space in the row.

Shrink

The column shrinks if there isn't enough room for everything in the row.

No-grow

The column will not expand beyond its content size, even if extra space is available.

No-shrink

The column keeps its size even when space is tight (other columns shrink instead).

No-flex

Disables flex behavior entirely — the column behaves like a fixed-width column based on its content.

Size (Fixed columns)

For Fixed columns, set a Size value:

A number from 1 to 12 — the column takes that fraction of the 12-column grid (e.g., 6 = half width).
A CSS value like 300px, 20%, or 5rem — the column takes that exact width.

Device Size Override

This is the most important setting for responsive design. The Device Size dropdown at the top of the column popover lets you set different sizes (and orders) for each breakpoint.

Device

Triggers when container is

Use case

All

Less than 480px wide (and as the fallback for any device that has no specific override)

Mobile phones in portrait

Small

480px and wider

Large phones and small tablets

Medium

768px and wider

Tablets

Large

1024px and wider

Desktop

When you change Device Size and edit a column's size, you're only setting the size for that breakpoint and up until the next override. The system falls back from large → medium → small → default.

Order

Each column has an Order value (default 0). Columns with lower order numbers appear first. Order can also be overridden per device, which lets you reorder content on mobile — for example, showing a customer photo above the details on phones, but to the right on desktop.

Alignment Bump

Pushes a single column to one edge of the row regardless of the row's alignment. Useful for splitting a header into "left side" and "right side" content.

Value

Effect

Left

Pushes this column and everything before it to the left edge.

Right

Pushes this column and everything after it to the right edge.

Top

Aligns this column to the top of the row.

Bottom

Aligns this column to the bottom of the row.

Example: A header with a logo (Left bump) and account menu (Right bump) — the space between them grows or shrinks with the screen.

Padding

Adds inner spacing around the column's content.

Option

Effect

Horizontal Small / Medium / Large

Adds padding to the left and right only.

Around Small / Medium / Large

Adds padding to all four sides.

Set Component Visibility

All components support conditional visibility — see Component Visibility.

Mobile Configuration

Most "broken on mobile" reports trace back to one of three settings. Follow this checklist when building any layout that has to work on a phone.

The Mobile Breakpoint

The Default ("All") device size in the column popover is what applies on mobile (less than 480px wide). If you skip the Default size and only set Large/Medium/Small, the column falls back through those values — but it's safer to be explicit.

Required Settings for a Mobile-Friendly Layout

Setting

Where

Required Value

Why

Allow Wrapping on Multiple Rows

Layout container

✅ On

Without this, columns refuse to drop to a new row and either overflow off-screen or shrink illegibly.

Default (All) Device Size on each column

Each column's popover, Device Size = All

12 (full width)

Forces each column to take 100% width on phones, stacking them vertically.

Larger Device Size override

Each column's popover, Device Size = Large (and optionally Medium)

4, 6, or another grid value

Restores the multi-column layout on tablet and desktop.

Equal Heights

Layout container

Off (usually)

On phones with stacked columns, equal heights forces every stacked card to match the tallest — usually not what you want vertically.

The Standard Pattern

For 99% of responsive layouts, configure each column like this:

Flexibility: Fixed
Device Size = All: 12 (full width on mobile)
Device Size = Medium: 6 (half width on tablet) — or skip if the desktop size should also apply on tablet
Device Size = Large: 4 (third width on desktop) — adjust based on how many columns you want per row

Reordering Content on Mobile

Use Order with device overrides when the desktop reading order doesn't make sense on a phone. For example, on a Case record:

Desktop: sidebar (related lists) on the left, main content on the right.
Mobile: main content first, related lists below.

Set Order = 2 on the sidebar column for the All device, and Order = 1 on the Large device. The sidebar appears second on mobile and first on desktop.

Mobile Preview

Before deploying, use the device toggle in the builder's preview to verify each breakpoint. Resizing the browser window also triggers the breakpoint logic — the layout reflows in real time.

The breakpoints are based on the container's width, not the device's screen width. A Columns component placed inside a narrow Lightning Page region will hit the mobile breakpoint sooner than one in a full-width region

Use Cases

Header with Left Logo and Right Actions

A common header pattern: brand on the left, action buttons on the right, regardless of screen width.

Add the Columns component with two columns

Drag in Columns, add 2 columns.
On the container, set Horizontal Alignment to Spread.
Set Vertical Alignment to Center.

Configure Column 1 (Logo)

Flexibility: Flexible
Flexibility option: Auto
Drop an Image or Avatar component inside.

Configure Column 2 (Actions)

Flexibility: Flexible
Flexibility option: Auto
Alignment Bump: Right
Drop a Button Group or Button Menu inside.

KPI Row that Stacks on Mobile

Four KPI cards in a row on desktop, two-by-two on tablet, stacked on mobile.

Add the Columns component with four columns

Drag in Columns, add 4 columns.
On the container, check Allow Wrapping on Multiple Rows.
Set Vertical Alignment to Stretch and Equal Heights to ✅ on, so all four cards match the tallest.

Configure all four columns identically

For each column:

Flexibility: Fixed
Device Size = All: 12 (one per row on mobile)
Device Size = Medium: 6 (two per row on tablet)
Device Size = Large: 3 (four per row on desktop)
Drop a Card or KPI component inside.

Styling

The Style tab of the Edit Columns panel lets you frame and space the entire container, overriding default styles.

Controls the outer spacing around the Columns container, creating space between it and other elements.

Top / Right / Bottom / Left: Adjust the space on each side of the container.

Key Considerations

The grid is 12 units wide. Plan column sizes so they sum to 12 (or less if you want gaps): 12, 6+6, 4+4+4, 3+3+3+3, 8+4, etc.
Always set the All (Default) Device Size for every column — it's the fallback when no other override applies.
Allow Wrapping on Multiple Rows is off by default. Turn it on for any layout that needs responsiveness.
Breakpoints are based on the container width, not the screen width. A narrow Lightning Page region triggers the mobile breakpoint earlier than a full-width region.
Don't nest Columns components more than two levels deep — it gets hard to predict and harder to maintain.
For headers and toolbars, prefer Flexible columns with Auto and Alignment Bumps. For content grids, prefer Fixed columns with grid sizes per device.
Use Order with device overrides to optimize the reading flow on mobile — important content first, supporting content below

Troubleshooting Common Issues

Columns don't stack on mobile — Allow Wrapping on Multiple Rows is off on the container. Select the Columns component and check Allow Wrapping on Multiple Rows in the Properties Panel.
Columns stack on mobile but stay full width on desktop too — The Large (or Medium) Device Size override wasn't set on the columns; only the Default size was set. Click each column, switch the Device Size to Large, and set a smaller size like 4 or 6. Repeat for Medium if needed.
Columns are different heights and look misaligned — Vertical Alignment is set to Top or Center and the columns have different content lengths. On the container, set Vertical Alignment to Stretch or enable Equal Heights to force matching heights.
Horizontal Alignment setting (Center / End / Space / Spread) does nothing — The columns already fill the row entirely, leaving no extra space to distribute. Use Fixed columns with sizes that don't sum to 12 (e.g., two columns at size 4 each), or use Flexible columns with No-grow.
One column refuses to shrink and pushes other columns off-screen — The column is set to Flexible with No-shrink, or it is Fixed with a CSS value larger than the container. Change the column to Shrink or Auto, or reduce its fixed size.
Alignment Bump doesn't push the column to the edge — Another column to the side has Grow enabled, which fills the space the bump would create. Set the adjacent column's flexibility to Auto or No-grow.
Padding on a column adds horizontal scrollbars — The fixed column size plus padding exceeds the available row width. Reduce the column's size or switch from Around padding to Horizontal padding only.
Column order changes correctly in the builder but not on the deployed page — The page's container is wider than expected, so a different breakpoint than anticipated is active. Resize the browser to verify which breakpoint applies, then set the Order override on the matching device size.
Equal Heights doesn't work — columns still differ in height — The container has Allow Wrapping on and the columns have wrapped to multiple rows; Equal Heights only matches columns within the same row. Either disable wrapping, or accept that each row sets its own equal height independently.

Last updated 25 days ago

Was this helpful?