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

Max-width content constrainer with responsive size presets.

Wraps page content in a centered, max-width constrained block. Designed for
full-width page sections that need their content capped at a readable width.

| Size    | Max-width            |
|---------|----------------------|
| `:sm`   | `max-w-screen-sm`    |
| `:md`   | `max-w-screen-md`    |
| `:lg`   | `max-w-screen-lg`    |
| `:xl`   | `max-w-screen-xl`    |
| `:"2xl"`| `max-w-screen-2xl`   |
| `:full` | `max-w-full`         |
| `:fluid`| unconstrained        |

## Examples

    <.container>
      <h1>Page content</h1>
    </.container>

    <.container size={:xl} class="py-8">
      <.simple_grid cols={3} gap={4}>
        ...
      </.simple_grid>
    </.container>

    <%!-- Full-width, no centering --%>
    <.container size={:fluid} centered={false} padding={false}>
      <canvas id="chart" />
    </.container>

    <%!-- Fluid padding: scales from px-4 to px-8 automatically --%>
    <.container fluid_padding>
      <h1>Smoothly scaled padding</h1>
    </.container>

# `container`

Renders a max-width content container.
## Attributes

* `size` (`:atom`) - Max-width preset. Defaults to `:lg`. Must be one of `:sm`, `:md`, `:lg`, `:xl`, `:"2xl"`, `:full`, or `:fluid`.
* `centered` (`:boolean`) - Adds `mx-auto` to center horizontally. Defaults to `true`.
* `padding` (`:boolean`) - Adds `px-4 sm:px-6 lg:px-8` horizontal padding. Defaults to `true`.
* `fluid_padding` (`:boolean`) - Uses CSS clamp-based fluid padding that scales smoothly between breakpoints. Overrides `:padding` when enabled. 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) - Content to constrain.

---

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