# `PhiaUi.Components.SortableGrid`
[🔗](https://github.com/charlenopires/PhiaUI/blob/v0.1.17/lib/phia_ui/components/interaction/sortable_grid.ex#L1)

Sortable grid drag-and-drop components for PhiaUI.

Provides `sortable_grid/1` and `sortable_grid_item/1`. Pair with the
`PhiaSortableGrid` hook for 2D nearest-neighbour drag-and-drop reordering.

## Example

    <.sortable_grid id="photo-grid" cols={3} on_reorder="grid_reorder">
      <.sortable_grid_item :for={{img, idx} <- Enum.with_index(@images)}
        id={"img-#{img.id}"} index={idx} aspect="square">
        <img src={img.url} class="w-full h-full object-cover" />
      </.sortable_grid_item>
    </.sortable_grid>

# `sortable_grid`

Renders a sortable grid container backed by the `PhiaSortableGrid` hook.

The hook uses 2D Euclidean nearest-neighbour comparison to find the closest
grid cell when dragging, giving a natural feel for image galleries and card
grids. Emits `on_reorder` with `%{old_index: N, new_index: M, id: "dom-id"}`.

## Attributes

* `id` (`:string`) (required)
* `cols` (`:integer`) - Defaults to `3`.
* `gap` (`:string`) - Defaults to `"md"`. Must be one of `"sm"`, `"md"`, or `"lg"`.
* `on_reorder` (`:string`) - Defaults to `"grid_reorder"`.
* `class` (`:string`) - Defaults to `nil`.
* Global attributes are accepted.
## Slots

* `inner_block` (required)

# `sortable_grid_item`

Renders a single sortable grid cell.

The `aspect` attribute locks the cell ratio: `"square"` (1:1), `"video"` (16:9),
or `"auto"` (natural height). The hook sets `data-dragging` during the drag.

## Attributes

* `id` (`:string`) (required)
* `index` (`:integer`) (required)
* `aspect` (`:string`) - Defaults to `"auto"`. Must be one of `"square"`, `"video"`, or `"auto"`.
* `class` (`:string`) - Defaults to `nil`.
* Global attributes are accepted.
## Slots

* `inner_block` (required)

---

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