# Columns

## Overview

The Columns component is a container that lays out other Dynamic Components in horizontal columns. It's the foundation of every responsive layout in the builder — record details next to a sidebar, KPIs in a row, side-by-side forms, or full-width hero sections that collapse on mobile.

You add the Columns component 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.

{% stepper %}
{% step %}

#### **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.

{% @arcade/embed flowId="1NxgCHxiEFhyG117UAeG" url="<https://app.arcade.software/share/1NxgCHxiEFhyG117UAeG>" %}
{% endstep %}

{% step %}

#### **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.*
{% endstep %}

{% step %}

#### **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.*
{% endstep %}

{% step %}

#### **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
  {% endstep %}

{% step %}

#### **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.
{% endstep %}
{% endstepper %}

***

## Configuration

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 in the Properties Panel after selecting the Columns component.

| Setting                             | Description                                                                                                                              | Options                                                                                               |
| ----------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------- |
| **Horizontal Alignment**            | Positions the group of columns along the horizontal axis. Only takes effect when total column widths are less than the container.        | `Start` (left), `Center`, `End` (right), `Space` (equal space between), `Spread` (equal space around) |
| **Vertical Alignment**              | Aligns columns vertically when they have different heights.                                                                              | `Top`, `Middle`, `Bottom`, `Stretch` (all columns match the tallest)                                  |
| **Allow Wrapping on Multiple Rows** | Lets columns wrap to a new row when there isn't enough horizontal space. **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                                                                                              |

{% hint style="warning" %}

#### **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
{% endhint %}

### 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.          |

***

## 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.

{% hint style="info" %}
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
{% endhint %}

***

## Examples

#### Header with Left Logo and Right Actions

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

{% stepper %}
{% step %}

#### **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 `Middle`.
  {% endstep %}

{% step %}

#### **Configure Column 1 (Logo)**

* **Flexibility:** `Flexible`
* **Flexibility option:** `Auto`
* Drop an **Image** or **Avatar** component inside.&#x20;
  {% endstep %}

{% step %}

#### **Configure Column 2 (Actions)**

* **Flexibility:** `Flexible`
* **Flexibility option:** `Auto`
* **Alignment Bump:** `Right`
* Drop a **Button Group** or **Button Menu** inside.
  {% endstep %}
  {% endstepper %}

#### KPI Row that Stacks on Mobile

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

{% stepper %}
{% step %}

#### **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.
  {% endstep %}

{% step %}

#### **Configure all four columns identically**

**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.
  {% endstep %}
  {% endstepper %}

***

## Troubleshooting

| Problem                                                                        | Cause                                                                                                                                          | Fix                                                                                                                                                                     |
| ------------------------------------------------------------------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Columns don't stack on mobile — they stay side-by-side and overflow the screen | **Allow Wrapping on Multiple Rows** is off on the container.                                                                                   | Select the Columns component, 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 `Middle`, 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 — there's no extra space to distribute.                                                              | Use **Fixed** columns with sizes that don't sum to 12 (e.g., two columns at size `4` each, leaving 4 units of empty space), 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's **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.                                                                               |

***

## 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


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.avonnicomponents.com/dynamic-components/components/columns.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.