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.

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

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

<!-- 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 individual items contained in the layout.

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.

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 [email protected] for assistance.