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

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>

Summary

Functions

grid(assigns)

Renders a CSS Grid container.

Functions

grid(assigns)

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.