> For the complete documentation index, see [llms.txt](https://docs.flatredball.com/gum/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.flatredball.com/gum/gum-tool/tutorials-and-examples/examples/bottom-up-stack.md). # Bottom-Up Stack Bottom-up stacks can be used to display stacks of elements which should move up as more are added. This concept is similar to messages received in a chat window. Gum layout can be used to produce this type of stack. {% hint style="info" %} This example shows a bottom-up stack (vertical) but the same approach could be used to create a right-aligned stack. {% endhint %} Items in a bottom-up stack need a parent Container. This Container could be an instance of a Container or a component since components usually have their `Base Type` set to Container. For this example we'll use a container.

This container to stack needs the following variables set: * `Children Layout` set to `Top to Bottom Stack` so all children stack vertically

* `Height Units` set to `Relative to Children` so the container resizes itself as more children are added

* `Height` set to `0` so the effective height of the container is based purely on its children

* `Stack Spacing` set to `2` (optional) to add spacing between each child

Now children of the Container stack vertically. This concept works for any type of child, but we'll use ColoredRectangles for this example. Add a few instances to the Container and they stack vertically.

ColoredRectangle instances stacking vertically in a container

Finally we can have the stack grow up instead of down. To do this, change the following variables on the parent container: * `Y Origin` set to `Bottom`

* `Y Units` set to `Pixels from Bottom`

Now as new children are added, the parent stack grows and all items shift up.

Stack grows upward as more children are added

--- # 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.flatredball.com/gum/gum-tool/tutorials-and-examples/examples/bottom-up-stack.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.