# CardContainer

## <mark style="color:green;">class</mark> **CardContainer**

{% hint style="warning" %}
Do not create **CardContainer** instances directly. Instead, use the `create_container()` method of the [Tab](/ui-scripting/api-reference/tab.md) class to genereate them.
{% endhint %}

{% hint style="info" %}
**At least one `CardContainer` is required within a `Tab` element.**

A `Tab` can hold multiple `CardContainer` objects. Nesting `CardContainer` objects inside each other is allowed, meaning you can create complex layouts with nested containers. However, we **do not recommend** nesting more than 3 `CardContainer` objects, as it may result in a poorly structured UI that looks disorganized or cluttered.
{% endhint %}

#### Constructor

```python
# Basic example
container = tab.create_container() # Default type of "columns" and variants of {"height": "full","width": "full"} will be used

# Custom parameters
container = tab.create_container(
    type="columns",
    height="full",
    width="auto",
    gap=8
)

# Rows example
container = tab.create_container(
    type="rows",
    height="full",
    width="auto",
    gap=8
)
```

<table><thead><tr><th width="216">Parameter</th><th>Description</th></tr></thead><tbody><tr><td>type</td><td>Allowed: <code>"columns"</code> | <code>"rows"</code><br>Default: <code>"columns"</code></td></tr><tr><td>width</td><td>Allowed: <code>"auto"</code> | <code>"full"</code><br>Default: <code>"full"</code></td></tr><tr><td>height</td><td>Allowed: <code>"auto"</code> | <code>"full"</code><br>Default: <code>"full"</code></td></tr><tr><td>gap</td><td>See <a href="/pages/DTBGfFducdgJJ6exaVF7#gap">Gap</a><br>Default: <code>6</code></td></tr></tbody></table>

#### Methods

<table><thead><tr><th width="279">Method</th><th>Description</th></tr></thead><tbody><tr><td>create_container(type, **kwargs)</td><td>Creates a nested CardContainer.</td></tr><tr><td>create_card(**kwargs)</td><td>Creates and adds the <a href="/pages/uDaQkcNNIStq4QYUKXES">Card </a>to the CardContainer.</td></tr></tbody></table>

### Examples

The following examples demonstrate how to create layouts using CardContainers and [Cards](/ui-scripting/api-reference/card.md).

<figure><img src="/files/2ZNg29XZ5WTFVoWFkroJ" alt=""><figcaption><p>Simple example with just one card</p></figcaption></figure>

```python
tab = Tab(name='My Custom Tab')

# this container holds only one card, type does not matter
container = tab.create_container(type="columns")
card = container.create_card()

tab.render()
```

***

<figure><img src="/files/YMYe8JRNB94Sa8NQSIRT" alt=""><figcaption></figcaption></figure>

```python
tab = Tab(name='My Custom Tab')

container = tab.create_container(type="columns")

left_card = container.create_card()
right_card = container.create_card()

tab.render()
```

***

<figure><img src="/files/OeZRX5vMKGFIlgYizxRa" alt=""><figcaption></figcaption></figure>

```python
tab = Tab(name='My Custom Tab')

top_container = tab.create_container(type="columns")

top_left_card = top_container.create_card()
top_right_card = top_container.create_card()

# this container holds only one card, type does not matter
bottom_container = tab.create_container(type="columns") 

bottom_card = bottom_container.create_card()


tab.render()
```

***

<figure><img src="/files/yBSTsvWYFQezJiISXtYS" alt=""><figcaption></figcaption></figure>

```python
tab = Tab(name='My Custom Tab')

top_container = tab.create_container(type="columns")

top_left_card = top_container.create_card()
top_right_card = top_container.create_card()

bottom_container = tab.create_container(type="columns")

bottom_left_card = bottom_container.create_card()
bottom_right_card = bottom_container.create_card()


tab.render()
```

***

<figure><img src="/files/grTckYds9dzYTM6DnfC9" alt=""><figcaption></figcaption></figure>

```python
tab = Tab(name='My Custom Tab')

wrapper_container = tab.create_container(type="columns")

left_container = wrapper_container.create_container(type="rows")
top_card = left_container.create_card()
bottom_card = left_container.create_card()

# this container holds only one card, type does not matter
right_container = wrapper_container.create_container(type="columns")
right_card = right_container.create_card()

tab.render()
```


---

# 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://docs.nighty.one/ui-scripting/api-reference/cardcontainer.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.