# `Athanor.Components.Columns`
[🔗](https://github.com/Arsenalist/athanor/blob/v0.1.0-beta.7/lib/athanor/components/columns.ex#L1)

Multi-column layout container — library-native Athanor component.

Configurable via the editor's AutoEditorForm:
- `num_zones`: 2..4 columns
- `vertical_align`: top / center / bottom / stretch
- `width_distribution`: per-num_zones option set (50/50, 66/33, ...)

Storage shape:
    %{
      "num_zones"          => "2",
      "zone_names"         => ["one", "two"],
      "zones"              => %{"one" => [...nodes], "two" => [...nodes]},
      "vertical_align"     => "top",
      "width_distribution" => "equal"
    }

Child nodes inside each zone are rendered via
`Athanor.Renderer.node_component/1` — so any registered Athanor or
legacy component can live inside Columns.

## Editor canvas chrome

When `ctx.edit_mode?` is true, `render(:live)` adds dashed-border
zone borders and an "Add Component" button per zone. The button's
phx-click is built from `ctx.add_component_callback.(zone_name)` —
the consumer LiveView provides this callback (typically a
`Phoenix.LiveView.JS.push(...)` command) so the consumer's
palette modal is what opens; the library never assumes what
components are available.

---

*Consult [api-reference.md](api-reference.md) for complete listing*