> 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-item.md). # 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 ``. 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. ```html ``` **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. ```html ``` **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 layout item content. | ### Styling Hooks | CSS Variable | Type | Default | | ------------------------------------------- | --------- | ------- | | `--avonni-layout-item-spacing-block-start` | dimension | `0` | | `--avonni-layout-item-spacing-block-end` | dimension | `0` | | `--avonni-layout-item-spacing-inline-start` | dimension | `0` | | `--avonni-layout-item-spacing-inline-end` | dimension | `0` | ## Key Considerations * **Must be nested:** Layout Item only behaves correctly as a direct child of ``, 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 ``; 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 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-item.md?ask=&goal= ``` `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.