PhiaUi.Components.Layout.SimpleGrid (phia_ui v0.1.17)

Copy Markdown View Source

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>

Summary

Functions

simple_grid(assigns)

Renders an auto-responsive equal-width grid.

Functions

simple_grid(assigns)

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.