> 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/code/about/layout-overview.md). # Layout Overview ## Introduction Gum provides a flexible layout engine for creating responsive UI. Gum objects can be docked, anchored, stacked, wrapped, positioned, and sized dynamically. Layouts can be performed quickly using common containers such as StackPanel. Dock and Anchor methods can be used to position objects relative to their parent container. Individual *unit* values can be used to fine-tune the position of objects. ## Parent/Child Relationship Gum objects can be added to other Gum objects to create parent/child relationships. For example, the following shows two rectangles inside a parent container. Notice that the rectangles are positioned relative to the parent's position.

Children are positioned relative to their parent

Hierarchies can be many levels deep, allowing for complex, reactive layouts. Multiple containers can be used to adjust how different areas of a component react to changes in size.

## Dock and Anchor Gum objects can be docked and anchored to create common layout behaviors. Anchor adjusts the position of objects so that they reset against the sides, corners, or center of their parent.

Dock adjusts the position and size of an object so it sits against one or more edges of its parent. Docking can be used to adjust the width an object and also anchor it to the top or bottom.

Similarly, Dock can be used to adjust an object vertically and optionally anchor it to the left or right.

## Units and Origins Objects have the following Units and Origin values which provide more fine-tuned control over positioning and sizing. For example, an object can be positioned under its parent with the following code: ```csharp buttonInstance.Dock(Dock.Bottom); // after docking, set the YOrigin to Top, resulting in the button's // top being docked to the bottom of its parent ```

## Container Stack and Grid Parent containers can stack, wrap, and arrange their children in a grid.

--- # 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/code/about/layout-overview.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.