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

Auto-responsive equal-width grid — no manual breakpoints required.

Two operating modes:

1. **`cols` preset** — sets responsive breakpoints automatically:
   `grid-cols-1 sm:grid-cols-2 md:grid-cols-N lg:grid-cols-N`

2. **`min_child_width` (CSS auto-fit)** — uses inline style with
   `repeat(auto-fit, minmax(min(Xpx, 100%), 1fr))` so columns form and dissolve
   automatically as the container resizes. The `min()` wrapper prevents overflow
   when the container is narrower than `min_child_width`.

When `container_query` is enabled, the grid uses `@container` query classes
(`@sm:`, `@md:`, etc.) instead of viewport breakpoints, so columns respond to
the container width rather than the viewport.

## Examples

    <%!-- 3-col responsive with preset breakpoints --%>
    <.simple_grid cols={3} gap={4}>
      <.card>A</.card>
      <.card>B</.card>
      <.card>C</.card>
      <.card>D</.card>
    </.simple_grid>

    <%!-- Auto-fit: any number of cols from 200px children --%>
    <.simple_grid min_child_width="200px" gap={4}>
      <%= for item <- @items do %>
        <.card>{item}</.card>
      <% end %>
    </.simple_grid>

    <%!-- Container-query mode: responds to parent width --%>
    <.simple_grid cols={3} gap={4} container_query>
      <.card>A</.card>
      <.card>B</.card>
      <.card>C</.card>
    </.simple_grid>

# `simple_grid`

Renders an auto-responsive equal-width grid.
## Attributes

* `cols` (`:integer`) - Preset column count (1–6). Sets responsive `sm/md/lg` breakpoints automatically. Defaults to `nil`.
* `min_child_width` (`:string`) - CSS width (e.g. `"200px"`) for `auto-fit minmax`. Takes priority over `cols`. Defaults to `nil`.
* `gap` (`:any`) - Uniform gap (0–12) → `gap-N`. Accepts integer or responsive map. Defaults to `4`.
* `container_query` (`:boolean`) - Use `@container` query classes instead of viewport breakpoints. Defaults to `false`.
* `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*