# `Plushie.Widget.Grid`
[🔗](https://github.com/plushie-ui/plushie-elixir/blob/v0.6.0/lib/plushie/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 `Plushie.Type.A11y`.

# `option`

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

# `t`

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

# `a11y`

```elixir
@spec a11y(grid :: t(), a11y :: Plushie.Type.A11y.t() | map() | keyword()) :: t()
```

Sets accessibility annotations.

# `build`

```elixir
@spec build(grid :: t()) :: Plushie.Widget.ui_node()
```

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

# `column_width`

```elixir
@spec column_width(grid :: t(), column_width :: Plushie.Type.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 :: [Plushie.Widget.child()]) :: 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 :: Plushie.Widget.child()) :: t()
```

Appends a child to the grid.

# `row_height`

```elixir
@spec row_height(grid :: t(), row_height :: Plushie.Type.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*