> For the complete documentation index, see [llms.txt](https://docs.avonnicomponents.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.avonnicomponents.com/experience-cloud/experience-components/ax-layout.md).

# AX - Layout

## Overview

**AX - Layout** is an Experience Cloud component that organizes other components into structured rows and columns with flexible sizing and alignment on Experience Sites pages.

Use it to create multi-column layouts, responsive grids, or custom page structures by dragging and dropping components into layout sections. Control column widths, spacing, alignment, and responsive behavior for different screen sizes in Experience Builder.

Perfect for dashboard layouts, form sections, content grids, comparison tables, or anywhere your portal needs structured, multi-column content organization that adapts to mobile and desktop.

{% hint style="danger" %}
This component [leverages slots](/experience-cloud/getting-started/learning-the-basics.md#understanding-slots) for advanced customization, making it ideal for LWR sites. Aura sites do not support this level of customization.
{% endhint %}

## Configuration

### Properties

**Horizontal Align** adjusts the horizontal alignment of content within the layout, keeping it balanced and harmonized.

**Vertical Align** controls the vertical alignment of content, presenting it in a visually appealing manner that resonates with your design goals.

**Pull to Boundary** allows content to extend toward the boundaries of the layout, crafting layouts that maximize space.

**Multiple Rows** lets the layout accommodate content across multiple rows, distributing it in a structured, organized sequence.

**Display as Section** sets the layout to manifest as a distinct section within the page.

**Column Layout** determines how content is displayed within columns, establishing a grid-like structure for a systematic, neat arrangement — see [Column Layout Settings](#column-layout-settings) below.

### Column Layout Settings

The Column Layout settings provide flexibility in organizing page content, ensuring it adapts responsively to different screen sizes and devices while maintaining a clean, structured appearance.

#### Type

Determines the nature of the column layout.

* **Options:**
  * **`Flexible`**: Columns in this layout type adjust their size dynamically based on the content and the available screen space. This option is ideal for responsive designs where the layout needs to adapt to various device sizes.
  * **`Fixed`**: This option maintains a constant size for the columns, regardless of the screen size or content volume. Fixed columns are helpful when a uniform and consistent layout is required.
* **Usage:** Choose **`Flexible`** for fluid layouts that need to adjust to different screen sizes, and **`Fixed`** for layouts that require consistency in column widths.

#### Size

Sets the width of the columns within the grid. The grid system is typically based on a 12-unit structure.

* **Range:** 1 to 12, where each unit represents a proportion of the total available width.
* **Usage:** Assign a size to define how much space each column should occupy. For instance, setting a size of 4 in a 12-unit grid would mean the column takes up one-third of the available horizontal space.

#### Alignment Bump

Adjusts the position of the column within its container.

* **Options:**
  * **`Left`**: Shifts the column towards the left edge of the container.
  * **`Right`**: Moves the column towards the right edge.
  * **`Top`**: Aligns the column closer to the top of the container.
  * **`Bottom`**: Positions the column near the bottom of the container.
* **Usage:** Use this setting to fine-tune the position of columns relative to their surroundings, enhancing the layout's visual appeal and spatial balance.

#### Padding

Controls the internal spacing of the column.

* **Options:**
  * **`Horizontal`**: Adjusts padding on the left and right sides of the column.
  * **`Around`**: Adds padding on all sides of the column.
* **Usage:** Apply padding to create space within the column, ensuring the content is not flush against the edges, improving readability and visual aesthetics.

The column layout settings of the Avonni Layout Component are essential for creating polished and functional layouts in Salesforce Experience Cloud sites.

## Use Cases

| Name                                                                                                                                        | Description                                                                                                      |
| ------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------- |
| [**Create a grid layout**](/experience-cloud/tutorials/use-cases/creating-a-grid-layout.md)                                                 | Learn to create a dynamic grid layout with Avonni Components for showcasing products or features.                |
| [**Configuring Avonni Layout to be responsible**](/experience-cloud/tutorials/components/layout/configuring-the-layout-to-be-responsive.md) | Learn to create responsive, user-friendly layouts with Avonni Layout in Experience Cloud across various devices. |


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## 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, and the optional `goal` query parameter:

```
GET https://docs.avonnicomponents.com/experience-cloud/experience-components/ax-layout.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

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.