> ## Documentation Index
> Fetch the complete documentation index at: https://docs.saasio.io/llms.txt
> Use this file to discover all available pages before exploring further.

# Container Element

> Learn how to use the Container element to group, lay out, and style other elements for building structured and responsive designs.

***

The Container element is one of the most important building blocks for creating well-structured and organized layouts. Its primary purpose is to act as a parent that holds, groups, and arranges any child elements you place inside it, such as text, images, buttons, or even other containers.

Mastering the container is key to building everything from simple cards to complex, responsive page sections.

### How to Add a Container

To add a Container, find the "Container" element in the "Elements" panel on the left and drag it onto your page. You can then drag other elements directly inside the container.

### Layout Properties (Flexbox - Flex)

The power of the Container comes from its layout properties, which are based on the modern CSS Flexbox model. These settings, found in the right-side panel, control how child elements are positioned and spaced within the container.

<Tabs>
  <Tab title="Direction & Wrapping">
    These properties control the overall flow of the child elements.

    **Direction**
    Determines the primary axis along which children are arranged.

    * **Row (Horizontal):** Children are placed side-by-side, from left to right.
    * **Column (Vertical):** Children are stacked on top of each other, from top to bottom.

    **Wrap**
    Determines what happens when child elements overflow the container's space.

    * **No Wrap:** Children will shrink or overflow and will not move to a new line.
    * **Wrap:** If there isn't enough space, children will wrap onto the next line.
  </Tab>

  <Tab title="Alignment (Justify & Align)">
    These properties align children along the main and cross axes.

    **Justify Content**
    Aligns children along the **main axis** (the `Direction` you've set).

    * `Start`: Groups children at the beginning.
    * `Center`: Groups children in the middle.
    * `End`: Groups children at the end.
    * `Space-Between`: Distributes children evenly, with the first at the start and the last at the end.
    * `Space-Around`: Distributes children evenly with half-sized spaces at the ends.

    **Align Items**
    Aligns children along the **cross axis** (perpendicular to the `Direction`).

    * `Start`: Aligns children to the beginning of the cross axis.
    * `Center`: Aligns children to the middle of the cross axis.
    * `End`: Aligns children to the end of the cross axis.
    * `Stretch`: Stretches children to fill the container's cross axis.
  </Tab>

  <Tab title="Spacing (Padding & Gap)">
    These properties control the space inside and between elements.

    **Gap**
    Defines the space **between** each child element inside the container. This is the modern way to create gutters and spacing without using margins. You can set a row and column gap.

    **Padding**
    Defines the space **inside** the container, between its border and the child elements it holds. Think of it as the inner margin of the container.
  </Tab>
</Tabs>

### Dynamic Visibility

Just like other elements, you can show or hide a Container based on certain conditions. This is controlled by the **Visibility** property found in the **Custom** section of the right-side panel.

Bind this property to any data source that resolves to a boolean (`true` or `false`). The container and all elements inside it will be hidden when the value is `false`.

<Note>
  **Example:** To show a user's profile card only after they have logged in, place the card's elements inside a container and set its Visibility if `{{currentUser.status}}` is `authenticated`.
</Note>

### Styling the Container

You can fully customize the appearance of the container from the right-side styling panel. Common styling options include:

* **Background**: Set a solid color, gradient, or background image.
* **Borders**: Control the color, width, and style of the container's borders.
* **Border Radius**: Adjust to create rounded corners.
* **Shadow**: Apply a box shadow to make the container appear elevated.
* **Sizing**: Set the `Width`, `Height`, `Min-Width`, and other sizing properties.