# `Toddy.Iced.Widget.Grid`
[🔗](https://github.com/toddy-ui/toddy-elixir/blob/v0.3.0/lib/toddy/iced/widget/grid.ex#L1)

Grid layout -- arranges children in a fixed-column grid.

## Props

- `columns` (integer) -- number of columns. Default: 1.
- `spacing` (number) -- spacing between grid cells in pixels. Default: 0.
- `width` (number) -- grid width in pixels.
- `height` (number) -- grid height in pixels.
- `column_width` (Length) -- width of each column. Accepts `:fill`, `:shrink`,
  `{:fill_portion, n}`, or a fixed pixel number.
- `row_height` (Length) -- height of each row. Accepts `:fill`, `:shrink`,
  `{:fill_portion, n}`, or a fixed pixel number.
- `fluid` (number) -- enables fluid grid mode. The value is the max cell width
  in pixels; columns auto-wrap to fit the available width.
- `a11y` (map) -- accessibility overrides. See `Toddy.Iced.A11y`.

# `option`

```elixir
@type option() ::
  {:columns, pos_integer()}
  | {:spacing, number()}
  | {:width, number()}
  | {:height, number()}
  | {:column_width, Toddy.Iced.Length.t()}
  | {:row_height, Toddy.Iced.Length.t()}
  | {:fluid, number()}
  | {:a11y, Toddy.Iced.A11y.t()}
```

# `t`

```elixir
@type t() :: %Toddy.Iced.Widget.Grid{
  a11y: Toddy.Iced.A11y.t() | nil,
  children: [Toddy.Iced.ui_node() | struct()],
  column_width: Toddy.Iced.Length.t() | nil,
  columns: pos_integer() | nil,
  fluid: number() | nil,
  height: number() | nil,
  id: String.t(),
  row_height: Toddy.Iced.Length.t() | nil,
  spacing: number() | nil,
  width: number() | nil
}
```

# `a11y`

```elixir
@spec a11y(grid :: t(), a11y :: Toddy.Iced.A11y.t()) :: t()
```

Sets accessibility annotations.

# `build`

```elixir
@spec build(grid :: t()) :: Toddy.Iced.ui_node()
```

Converts this grid struct to a `ui_node()` map via the `Toddy.Iced.Widget` protocol.

# `column_width`

```elixir
@spec column_width(grid :: t(), column_width :: Toddy.Iced.Length.t()) :: t()
```

Sets the column width using a Length value (fill/shrink/fixed/fill_portion).

# `columns`

```elixir
@spec columns(grid :: t(), columns :: pos_integer()) :: t()
```

Sets the number of columns.

# `extend`

```elixir
@spec extend(grid :: t(), children :: [Toddy.Iced.ui_node() | struct()]) :: t()
```

Appends multiple children to the grid.

# `fluid`

```elixir
@spec fluid(grid :: t(), max_width :: number()) :: t()
```

Enables fluid grid mode. The value is the max cell width in pixels; columns auto-wrap.

# `height`

```elixir
@spec height(grid :: t(), height :: number()) :: t()
```

Sets the grid height in pixels.

# `new`

```elixir
@spec new(id :: String.t(), opts :: [option()]) :: t()
```

Creates a new grid struct with optional keyword opts.

# `push`

```elixir
@spec push(grid :: t(), child :: Toddy.Iced.ui_node() | struct()) :: t()
```

Appends a child to the grid.

# `row_height`

```elixir
@spec row_height(grid :: t(), row_height :: Toddy.Iced.Length.t()) :: t()
```

Sets the row height using a Length value (fill/shrink/fixed/fill_portion).

# `spacing`

```elixir
@spec spacing(grid :: t(), spacing :: number()) :: t()
```

Sets the spacing between grid cells in pixels.

# `width`

```elixir
@spec width(grid :: t(), width :: number()) :: t()
```

Sets the grid width in pixels.

# `with_options`

```elixir
@spec with_options(grid :: t(), opts :: [option()]) :: t()
```

Applies keyword options to an existing grid struct.

---

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