# Layout Reference

Complete reference for Hypen layout components

# Layout Reference

Complete reference for layout components in Hypen.

## Column

Arranges children vertically.

```hypen
Column {
    Text("Top")
    Text("Middle")
    Text("Bottom")
}
.gap(12)
```

## Row

Arranges children horizontally.

```hypen
Row {
    Text("Left")
    Text("Right")
}
.gap(12)
```

## Box / Container

Generic container with z-axis stacking.

```hypen
Box {
    Image("background.jpg")
    Text("Overlay")
}
```

## Center

Centers children both horizontally and vertically.

```hypen
Center {
    Spinner()
}
.fillMaxSize(true)
```

## Stack

Z-axis stacking for overlapping elements.

```hypen
Stack {
    Card { Text("Base") }
    Badge("New")
}
```

## Grid

Data-driven grid: pass an array binding and an item template — one child is
rendered per record, laid out in configurable columns. (A static
`Grid { ... }` with hand-written children is an error; use nested
`Row`s/`Column`s for fixed layouts.)

```hypen
Grid(@state.products, key: "id") {
    Card { Text("@{item.name}") }
}
.gridColumns(2)
.gap(16)
```

## List

Scrollable, data-driven list — shorthand for
`ForEach(items: @state.items, key: "id")` in a scrollable container. The
array binding is required.

```hypen
List(@state.items) {
    Text("@{item.title}")
}
.height(400)
```

## Spacer

Flexible empty space.

```hypen
Row {
    Text("Left")
    Spacer()
    Text("Right")
}
```

## Divider

Visual separator line.

```hypen
Column {
    Text("Section 1")
    Divider()
    Text("Section 2")
}
```

## Alignment Applicators

| Applicator | Values |
|------------|--------|
| horizontalAlignment | start, center, end, space-between, space-around |
| verticalAlignment | start, center, end, space-between, space-around |

## Size Applicators

| Applicator | Description |
|------------|-------------|
| width | Fixed width |
| height | Fixed height |
| minWidth / maxWidth | Width constraints |
| minHeight / maxHeight | Height constraints |
| fillMaxWidth | Fill available width |
| fillMaxHeight | Fill available height |
| fillMaxSize | Fill both dimensions |