# `PhiaUi.Components.Layout.Wrap`
[🔗](https://github.com/charlenopires/PhiaUI/blob/v0.1.17/lib/phia_ui/components/layout/wrap.ex#L1)

Flex-wrap container for tags, chips, and button groups.

Items wrap onto new lines automatically when they exceed the container width.
Ideal for tag clouds, filter chips, and multi-select badge displays.

All layout attributes accept either a plain value (backward compatible) or a
responsive map like `%{base: 2, md: 4}` for per-breakpoint control.

## Examples

    <%!-- Tag cloud --%>
    <.wrap gap={2}>
      <%= for tag <- @tags do %>
        <.badge>{tag}</.badge>
      <% end %>
    </.wrap>

    <%!-- Responsive gap --%>
    <.wrap gap={%{base: 1, md: 2, lg: 3}}>
      <.chip>Design</.chip>
      <.chip>Engineering</.chip>
    </.wrap>

    <%!-- Centered chips --%>
    <.wrap justify={:center} gap={2}>
      <.chip>Design</.chip>
      <.chip>Engineering</.chip>
      <.chip>Product</.chip>
    </.wrap>

# `wrap`

Renders a flex-wrap container.
## Attributes

* `gap` (`:any`) - Uniform gap (0–12) → `gap-N`. Accepts integer or responsive map. Defaults to `2`.
* `gap_x` (`:any`) - Horizontal gap → `gap-x-N`. Accepts integer or responsive map. Defaults to `nil`.
* `gap_y` (`:any`) - Vertical gap → `gap-y-N`. Accepts integer or responsive map. Defaults to `nil`.
* `align` (`:any`) - align-items value. Accepts atom or responsive map. Defaults to `:start`.
* `justify` (`:any`) - justify-content value. Accepts atom or responsive map. Defaults to `:start`.
* `class` (`:string`) - Additional CSS classes merged via cn/1. Defaults to `nil`.
* Global attributes are accepted. HTML attributes forwarded to the root element.
## Slots

* `inner_block` (required) - Wrappable children.

---

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