# Layout Components

Layout components are the scaffolding that holds every other block in place. Rows go side-by-side, Columns stack vertically, Grids tile uniformly, Flex handles awkward cases, and Header/Sidebar Nav define page chrome.

Each layout block has its own module-type availability — see the individual pages for specifics.

## Components in this category

<table data-view="cards"><thead><tr><th></th><th></th><th data-hidden data-card-target data-type="content-ref"></th></tr></thead><tbody><tr><td><strong>Row</strong></td><td>Horizontal container — building block for any side-by-side layout.</td><td><a href="/pages/X8iFEn2kZKLwzxA43m0n">/pages/X8iFEn2kZKLwzxA43m0n</a></td></tr><tr><td><strong>Column</strong></td><td>Vertical container that lives inside a Row, with configurable width.</td><td><a href="/pages/8aNEjXjvJ5ZFtVgxZKrC">/pages/8aNEjXjvJ5ZFtVgxZKrC</a></td></tr><tr><td><strong>Grid</strong></td><td>A uniform grid of cells with configurable column count.</td><td><a href="/pages/6hDoUEHW1NxUqQ5to1CJ">/pages/6hDoUEHW1NxUqQ5to1CJ</a></td></tr><tr><td><strong>Flex</strong></td><td>Flexbox container with full control over direction, justification, and wrap.</td><td><a href="/pages/xvomwr5XOTvf1qg9Gl7y">/pages/xvomwr5XOTvf1qg9Gl7y</a></td></tr><tr><td><strong>Space</strong></td><td>Adds blank space between sections.</td><td><a href="/pages/RNFtvknsImsww5513GTb">/pages/RNFtvknsImsww5513GTb</a></td></tr><tr><td><strong>Divider</strong></td><td>A horizontal rule for visually separating sections.</td><td><a href="/pages/hsmtJd92IfiIKCesN1CW">/pages/hsmtJd92IfiIKCesN1CW</a></td></tr><tr><td><strong>Tabs</strong></td><td>Group content into tabs — each tab holds its own components.</td><td><a href="/pages/bmd38S9wPTO30xQjVzh5">/pages/bmd38S9wPTO30xQjVzh5</a></td></tr><tr><td><strong>Modal</strong></td><td>A pop-up dialog with Header, Body, Footer slots.</td><td><a href="/pages/q0VmZaW68R0qPOGtHU51">/pages/q0VmZaW68R0qPOGtHU51</a></td></tr><tr><td><strong>Header Nav</strong></td><td>The top navigation bar for portals using a horizontal header.</td><td><a href="/pages/Ttw6RF5yUZ70D8EONa1P">/pages/Ttw6RF5yUZ70D8EONa1P</a></td></tr><tr><td><strong>Sidebar Nav</strong></td><td>The vertical navigation panel for sidebar layouts.</td><td><a href="/pages/GfGRuxVlbhIr6fQgGtWt">/pages/GfGRuxVlbhIr6fQgGtWt</a></td></tr><tr><td><strong>Transaction List</strong></td><td>A specialised layout for transaction-listing pages with filter and table slots.</td><td><a href="/pages/LMG5Zk0dNtZ4LInQmyDM">/pages/LMG5Zk0dNtZ4LInQmyDM</a></td></tr></tbody></table>

## When you'd reach for this category

| I want to...                                      | Use...                                            |
| ------------------------------------------------- | ------------------------------------------------- |
| Place components side by side                     | **Row** + **Column**                              |
| Stack components vertically                       | (just stack them, or use Column)                  |
| Create a uniform grid of tiles                    | **Grid**                                          |
| Have complex alignment or dynamic sizing          | **Flex**                                          |
| Add empty spacing between sections                | **Space**                                         |
| Visually separate sections with a horizontal rule | **Divider**                                       |
| Group content into tabbed sections                | **Tabs**                                          |
| Open content in a pop-up                          | **Modal**                                         |
| Build a transaction browser with filters          | **Transaction List**                              |
| Add a top nav                                     | **Header Nav** (Header Navigation modules only)   |
| Add a sidebar nav                                 | **Sidebar Nav** (Sidebar Navigation modules only) |

## Related

<table data-view="cards"><thead><tr><th></th><th></th><th data-hidden data-card-target data-type="content-ref"></th></tr></thead><tbody><tr><td><strong>Layout &#x26; Responsive</strong></td><td>How layouts collapse on smaller screens.</td><td><a href="/pages/i16RUpMIJ1hqIym73t8h">/pages/i16RUpMIJ1hqIym73t8h</a></td></tr><tr><td><strong>Common Patterns</strong></td><td>Ready-made layouts for dashboards, order forms, and POS pages.</td><td><a href="/pages/nuIC9dFKJRLG7aUU3PNh">/pages/nuIC9dFKJRLG7aUU3PNh</a></td></tr><tr><td><strong>Content Components</strong></td><td>The presentational blocks that go inside layout containers.</td><td><a href="/pages/w7kkPvC9m2diVFYlJhI9">/pages/w7kkPvC9m2diVFYlJhI9</a></td></tr></tbody></table>


---

# Agent Instructions: 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:

```
GET https://docs.in8sync.com/client-admin-guide/active-workflows/getting-started/layout-components.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
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.