> 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/lwc-components/core-components/layout.md).

# Layout

`avonni-layout`

A responsive grid system that arranges layout items into rows and columns, adapting their size and order to the container's width.

## Overview

**Layout** is a Lightning Web Component that provides a responsive grid system, arranging child `avonni-layout-item` elements into rows and columns that adapt to the container's width.

Use it in your own Lightning Web Components to build responsive page sections, card grids, and dashboards without media queries. The layout watches its own width and tells each item what size to take at small, medium, and large breakpoints, so the same markup reflows from a single column on narrow screens to multiple columns on wide ones.

### Use Cases

* **Card grids:** Lay out cards that go full-width on mobile and multi-column on desktop.
* **Dashboards:** Arrange tiles that reflow based on available space.
* **Forms:** Place fields side by side on wide screens and stacked on narrow ones.
* **Responsive sections:** Build page regions that adapt without media queries.
* **Reordering:** Change item order per breakpoint for mobile-first layouts.

***

## Layout Item Properties

Each `<avonni-layout-item>` accepts these attributes to control its responsive size and order:

| Property                | Type          | Description                                                                                         | Example |
| ----------------------- | ------------- | --------------------------------------------------------------------------------------------------- | ------- |
| `size`                  | String/Number | Default size: an integer 1–12 (twelfths of the layout) or a CSS flex-basis value. Used below 480px. | `12`    |
| `small-container-size`  | String/Number | Size applied when the layout is ≥ 480px.                                                            | `6`     |
| `medium-container-size` | String/Number | Size applied when the layout is ≥ 768px.                                                            | `3`     |
| `large-container-size`  | String/Number | Size applied when the layout is ≥ 1024px.                                                           | `2`     |
| `order`                 | Number        | Default order of the item (below 480px).                                                            | `1`     |
| `grow`                  | Number        | Grow factor: how much remaining space the item absorbs.                                             | `1`     |
| `shrink`                | Number        | Shrink factor when items exceed the layout width.                                                   | `1`     |

***

## Use Case Examples

### Example 1: Responsive card grid

**Scenario:** Display cards that are full-width on mobile, two-up on small screens, and four-up on medium-and-wider screens.

```html
<!-- cardGrid.html -->
<template>
    <avonni-layout
        direction="row"
        horizontal-align="spread"
        multiple-rows
        equal-heights
        onsizechange={handleSizeChange}
    >
        <template for:each={cards} for:item="card">
            <avonni-layout-item
                key={card.name}
                size="12"
                small-container-size="6"
                medium-container-size="3"
            >
                <div class="slds-box slds-m-around_x-small">
                    <h3 class="slds-text-heading_small">{card.label}</h3>
                    <p class="slds-text-body_small">{card.description}</p>
                </div>
            </avonni-layout-item>
        </template>
    </avonni-layout>
</template>
```

```js
// cardGrid.js
import { LightningElement } from 'lwc';

export default class CardGrid extends LightningElement {
    cards = [/* ...card data... */];

    handleSizeChange(event) {
        const width = event.detail.width; // 'default' | 'small' | 'medium' | 'large'
    }
}
```

**Result:** A responsive grid where each card spans the full width on narrow screens and collapses to two then four columns as the container grows, with all cards sharing the tallest height.

### Example 2: Two-column form that stacks on mobile

**Scenario:** Show two fields side by side on wide layouts and stacked on narrow ones.

```html
<!-- formRow.html -->
<template>
    <avonni-layout direction="row" multiple-rows vertical-align="start">
        <avonni-layout-item size="12" medium-container-size="6">
            <lightning-input label="First name"></lightning-input>
        </avonni-layout-item>
        <avonni-layout-item size="12" medium-container-size="6">
            <lightning-input label="Last name"></lightning-input>
        </avonni-layout-item>
    </avonni-layout>
</template>
```

**Result:** The two inputs stack vertically below 768px and sit side by side at 768px and wider.

***

## Specifications

### Attributes

| Name               | Description                                                                                                                 | Type    | Default     | Required |
| ------------------ | --------------------------------------------------------------------------------------------------------------------------- | ------- | ----------- | -------- |
| `direction`        | Direction in which the items are placed in the container. Valid values include row, row-reverse, column and column-reverse. | String  | `"row"`     |          |
| `equal-heights`    | If present, layout items have equal heights.                                                                                | Boolean | `false`     |          |
| `horizontal-align` | Determines how to spread the layout items horizontally. Valid values include start, center, space, spread, and end.         | String  | `"start"`   |          |
| `multiple-rows`    | If present, layout items wrap to the following line when they exceed the layout width.                                      | Boolean | `false`     |          |
| `vertical-align`   | Determines how to align the layout items vertically in the container. Valid values include start, center, end, and stretch. | String  | `"stretch"` |          |

### Slots

| Slot      | Description                                                                                     |
| --------- | ----------------------------------------------------------------------------------------------- |
| `default` | Placeholder for the layout items. Place one or more Layout Item components in the default slot. |

### Custom Events

#### `sizechange`

The event fired when the layout width changes.

The `sizechange` event returns the following parameters.

| Parameter | Type   | Description                                                   |
| --------- | ------ | ------------------------------------------------------------- |
| `width`   | string | Current width of the layout: default, small, medium or large. |

The event properties are as follows.

| Property   | Value | Description                                                                                               |
| ---------- | ----- | --------------------------------------------------------------------------------------------------------- |
| bubbles    | false | This event does not bubble.                                                                               |
| cancelable | false | This event has no default behavior that can be canceled. You can't call `preventDefault()` on this event. |
| composed   | false | This event does not propagate outside of the component in which it was dispatched.                        |

### Styling Hooks

| CSS Variable                                   | Type      | Default |
| ---------------------------------------------- | --------- | ------- |
| `--avonni-layout-items-spacing-block-between`  | dimension | `0`     |
| `--avonni-layout-items-spacing-inline-between` | dimension | `0`     |

## Key Considerations

* **Container-based, not viewport-based:** Breakpoints (480/768/1024px) measure the layout's own width, so nested layouts reflow correctly.
* **Sizes:** `size` and the `*-container-size` attributes accept 1–12 (twelfths) or any CSS flex-basis value.
* **Wrapping:** Items only wrap to new rows when `multiple-rows` is set.
* **Equal heights:** `equal-heights` measures items and applies the tallest height; expect a brief recalculation after content changes.
* **Best Practice:** Set `multiple-rows` when you want a card grid to wrap, and use the `*-container-size` attributes on each `avonni-layout-item` to control how many columns appear at each breakpoint.

***

## Troubleshooting Common Issues

* **Items don't wrap:** Add `multiple-rows` to the `avonni-layout`.
* **Columns don't change at breakpoints:** Set `small-container-size`, `medium-container-size`, and/or `large-container-size` on each `avonni-layout-item`.
* **Heights look uneven:** Add `equal-heights`; if heights still lag, ensure item content has settled before measuring.
* **If issues persist:** Contact our support team at <support@avonni.app> for assistance.


---

# 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/lwc-components/core-components/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.