> ## Documentation Index
> Fetch the complete documentation index at: https://docs.borntocraftstudio.net/llms.txt
> Use this file to discover all available pages before exploring further.

# Layout Types

> The 6 available layout types in OmniGui

# The 6 Layout Types

## 1. SimpleLayout — Static Grid

A flat list of items placed at specific slots (0-53 for a double chest).

```json theme={null}
{"case": "simple", "value": {"id": "borders", "items": [
  {"slots": [0,1,2,3,5,6,7,8], "item": {}}
]}}
```

**Use for**: borders, background fills, small menus with few items.

## 2. ScrollableLayout — Scrollable Viewport

Wraps a child layout and makes it scrollable. If `virtualHeight > 6`, vertical arrows appear automatically.

```json theme={null}
{"case": "scrollable", "value": {
  "id": "my_scroll",
  "innerId": "my_content",
  "virtualWidth": 9,
  "virtualHeight": 20,
  "showDefaultButtons": true
}}
```

> \[!WARNING]
> `virtualHeight` must be the **total** height of the inner content, not the visible area. If content has 20 rows, set `virtualHeight: 20`. The viewport clips to the inventory size.

## 3. CompositeLayout — Stack Layers

Combines multiple layouts by stacking them on top of each other. Later children render OVER earlier ones.

```mermaid theme={null}
graph LR
    C[CompositeLayout] --> L1[Layer 1 - Background]
    C --> L2[Layer 2 - Content]
```

## 4. FrameLayout — Independent Zones

Divides the inventory into rectangular regions (frames), each with its own layout.

```json theme={null}
{"case": "frame", "value": {
  "id": "split_view",
  "frames": [
    {"id": "left",  "x": 0, "y": 0, "width": 4, "height": 6, "layoutId": "left_content"},
    {"id": "right", "x": 5, "y": 0, "width": 4, "height": 6, "layoutId": "right_content"}
  ]
}}
```

## 5. PaginatedLayout — Pages

Splits items into discrete pages with prev/next navigation.

## 6. FlexLayout — Auto-Positioning

Uses CSS Flexbox-like logic to arrange items automatically.

```json theme={null}
{"case": "flex", "value": {
  "id": "flow",
  "items": [],
  "justifyContent": "CENTER",
  "alignItems": "START",
  "wrap": true
}}
```