Ctrlk
WebsiteYouTube ChannelSchedule a Call🪄 Build with AISubscribe for Updates
For the complete documentation index, see llms.txt. This page is also available as Markdown.

Layout Item

avonni-layout-item

An item placed inside a Layout component. Its size and order adapt responsively to the parent layout's width.

Overview

Layout Item is a Lightning Web Component that represents a single cell inside an Avonni Layout, controlling how that cell sizes, grows, shrinks, and orders itself as the layout's width changes.

Use it in your own Lightning Web Components as a direct child of <avonni-layout>. You control its responsive sizes, grow and shrink factors, order, and alignment bump through the component's attributes, building flexible grids that adapt across breakpoints.

Use Cases

  • Responsive grids: Give a cell a different size at small, medium, and large layout widths.

  • Filling free space: Use grow to let a cell expand into the remaining room in a row.

  • Preventing shrink: Use shrink="0" to keep a cell at its set size when space is tight.

  • Reordering on mobile: Move a cell earlier or later with order at specific breakpoints.

  • Edge alignment: Push a cell to the far edge of its row with alignment-bump.

Size Breakpoint Guidelines

Property
Applies When Parent Layout Is

size

Below 480px, or when no other size attribute is set.

small-container-size

480px or wider.

medium-container-size

768px or wider.

large-container-size

1024px or wider.

Use Case Examples

Example 1: Responsive three-column grid

Scenario: Lay out three cards that stack on phones, show two columns on tablets, and split into a 3/3/6 grid on desktop.

Result: Cells stack full width on small screens, form two columns at medium width, and arrange into a 3/3/6 grid on large screens.

Example 2: Fixed sidebar that never shrinks, bumped to the edge

Scenario: Keep a summary panel at a fixed size on the far right while the other cells flex.

Result: The main cell grows to fill free space, while the summary cell holds its size and is pushed to the right edge of the row.

Specifications

Attributes

Name
Description
Type
Default
Required

alignment-bump

Specifies a direction to bump the alignment of adjacent layout items. Allowed values are left, top, right, bottom.

String

—

grow

Positive number representing the grow factor of the column, which specifies how much of the layout's remaining space should be assigned to the item's.

Number

0

large-container-order

Order of the item when the parent layout’s size is greater or equal to 1024px.

Number

—

large-container-size

Size of the item when the parent layout’s size is greater or equal to 1024px. See size for accepted values.

string

number

—

medium-container-order

Order of the item when the parent layout’s size is greater or equal to 768px.

Number

—

medium-container-size

Size of the item when the parent layout’s size is greater or equal to 768px. See size for accepted values.

string

number

—

order

Default order of the item in the layout item. It will be applied if the parent layout’s size is lesser than 480px, or if no other order attribute is specified. Beware that since the default is 0, you need to set the order of all the items in the layout for the attribute to work properly.

Number

0

shrink

Positive number representing the shrink factor of the column. If the size of all the items is larger than the size of the layout, items shrink to fit according to this factor.

Number

1

size

Default size of the item. It will be applied if the parent layout’s size is lesser than 480px, or if no other size attribute is specified. The size can be expressed: * As an integer from 1 through 12, representing the relative space the item occupies in its parent layout. * As a CSS flex-basis valid value (for example "20%", "5rem", etc.).

string

number

"auto"

small-container-order

Order of the item when the parent layout’s size is greater or equal to 480px.

Number

—

small-container-size

Size of the item when the parent layout’s size is greater or equal to 480px. See size for accepted values.

string

number

—

Slots

Slot
Description

default

Placeholder for the item content.

Styling Hooks

CSS Variable
Type
Default

--avonni-layout-item-spacing-block-end

dimension

0

--avonni-layout-item-spacing-block-start

dimension

0

--avonni-layout-item-spacing-inline-end

dimension

0

--avonni-layout-item-spacing-inline-start

dimension

0

Key Considerations

  • Must be nested: Layout Item only behaves correctly as a direct child of <avonni-layout>, which manages its responsive sizing.

  • Size values: Integers 1–12 map to a percentage of the row; any other value is treated as a CSS flex-basis (e.g. "20%", "5rem").

  • Order defaults to 0: Because every item defaults to order 0, set order on all items in a layout for reordering to behave predictably.

  • Grow vs. shrink: grow expands an item into free space; shrink controls how much it gives up when the row is over capacity.

  • Best Practice: Express sizes as integers 1–12 for grid layouts, and set the same property across size, small-container-size, medium-container-size, and large-container-size to control the cell at each breakpoint.

Troubleshooting Common Issues

  • Sizes not changing across breakpoints: Confirm the item is inside <avonni-layout>; the parent reports its width to each item.

  • Reordering not working: Set order (and the per-breakpoint order attributes) on every item, since the default order of 0 is shared.

  • Item won't hold its width: Set shrink="0" so the item resists shrinking when the row runs out of space.

  • If issues persist: Contact our support team at [email protected] for assistance.

Last updated

Was this helpful?