# Containers

A container is a versatile component that can be added to both blank pages and record pages. Unlike other components, containers can nest multiple components within them, enabling better organization and layout customization.

### Using Containers in Noloco

{% embed url="<https://www.youtube.com/watch?v=IlLoW_RZFZ4>" %}

### **Benefits of Using Containers**

* **Visibility Rules**: Easily set visibility rules for multiple components at once.
* **Flexible Layouts**: Introduce columns and more complex layouts by grouping components within a container.
* **Denser Layouts:** Fit more information on the screen by adding a container that lets your content fit better together

<figure><img src="https://319575345-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MifpIQWu0HCVYAt51oT%2Fuploads%2Fgit-blob-a59a6a0842481ba5c1cc7dd816b395401a2c3334%2Fimage.png?alt=media" alt=""><figcaption></figcaption></figure>

### **How to Use Containers**

1. **Add a Container**: Navigate to the page where you want to add a container and select “Add Container”.
2. **Add Components**: Place new components inside the container or drag existing components into it.
3. **Arrange and Customize**: Adjust the placement and settings of the components within the container to suit your needs.

{% @arcade/embed url="<https://app.arcade.software/share/zH1nocwyUok6x8JcQVs8>" flowId="zH1nocwyUok6x8JcQVs8" %}

### **Optimizing Layouts with Containers**

Containers are particularly useful for creating side-by-side layouts with [charts](https://guides.noloco.io/charts/overview) and other components. Here's how to optimize your page layouts:

#### **Creating Side-by-Side Layouts**

To align charts and components horizontally:

1. Add a container to your [blank page](https://guides.noloco.io/pages/blank-pages) or [record page](https://guides.noloco.io/record-pages/overview)
2. Place your chart in one column of the container
3. Add your additional component (such as text, a [collection](https://guides.noloco.io/views/display), or another chart) in an adjacent column

#### **Adjusting Component Widths**

To ensure components align properly within a container:

* Set explicit widths for each component inside the container
* For balanced layouts, configure components to each occupy 50% of the container's width
* Manually adjust widths to your desired proportions if the default alignment doesn't meet your needs

{% hint style="info" %}
If you'd like a list displayed next to a chart, set both to occupy half the container's width. This ensures they render cleanly side-by-side without unnecessary empty space.
{% endhint %}

#### **Maximizing Space Usage**

To eliminate extra white space around charts:

* Set your chart to **Full width** to fill the available container space
* Ensure the parent container is also set to full width
* This allows charts and components to utilize the maximum available area

### **Example Use Cases**

* **Dashboard Customization**: Group related widgets and control their visibility based on user roles.
* **Form Layouts**: Create multi-column forms by nesting input fields within containers.
* **Chart Dashboards**: Display [charts](https://guides.noloco.io/charts/overview) alongside data lists or statistics for quick comparison and analysis.


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://guides.noloco.io/components/containers.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.