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

CSS Grid container with column, row, gap and auto-flow control.

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

## Examples

    <%!-- 3-column grid with gap --%>
    <.grid cols={3} gap={4}>
      <.card>A</.card>
      <.card>B</.card>
      <.card>C</.card>
    </.grid>

    <%!-- Responsive columns: 1 on mobile, 2 from md, 4 from lg --%>
    <.grid cols={%{base: 1, md: 2, lg: 4}} gap={%{base: 2, md: 4}}>
      <.card>A</.card>
      <.card>B</.card>
      <.card>C</.card>
      <.card>D</.card>
    </.grid>

    <%!-- 12-column layout grid --%>
    <.grid cols={12} gap={4}>
      <div class="col-span-8">Main</div>
      <div class="col-span-4">Sidebar</div>
    </.grid>

    <%!-- Dense auto-flow --%>
    <.grid cols={4} gap={3} flow={:dense}>
      <%= for item <- @items do %>
        <.card>{item.title}</.card>
      <% end %>
    </.grid>

# `grid`

Renders a CSS Grid container.
## Attributes

* `cols` (`:any`) - Number of columns (1–12) → `grid-cols-N`. Accepts integer or responsive map. Defaults to `nil`.
* `rows` (`:any`) - Number of rows (1–6) → `grid-rows-N`. Accepts integer or responsive map. Defaults to `nil`.
* `gap` (`:any`) - Uniform gap (0–12) → `gap-N`. Accepts integer or responsive map. Defaults to `nil`.
* `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`.
* `flow` (`:any`) - Grid auto-flow direction. Accepts atom or responsive map. Defaults to `nil`.
* `align` (`:any`) - align-items value. Accepts atom or responsive map. Defaults to `nil`.
* `justify` (`:any`) - justify-items value. Accepts atom or responsive map. Defaults to `nil`.
* `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) - Grid children.

---

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