> ## Knowledge Base Index
> Fetch the complete knowledge base index at: https://help.dorik.com/sitemap.xml
> Use this file to discover available pages before exploring further.
> Pure-Markdown content can be obtained by appending a '.md' suffix to the content URLs listed in the sitemap (without the trailing slash).

# Container

# Getting Started

A container is a well-organized and adaptable layout designed for web pages. Multiple containers & elements can be added inside a container and styled differently. 


---

# How to take a Container?

You can add a container by clicking the `+Add New Section` button and then choosing your desired sized container.


![](https://storage.crisp.chat/users/helpdesk/website/cf1fc9cc00911000/gif-recording-2024-02-12-at-21_ici8zo.gif)


|| 💡 When you take a section, there comes a Root Container, which basically acts as a Row, and a Child Container inside it, which acts like a column.


![](https://storage.crisp.chat/users/helpdesk/website/cf1fc9cc00911000/untitled_tmb7b6.png)

---


# Container Editorial Mode

Container editor mode comes up with 3 sectors, which are **General, Styles & Advanced**.

![](https://storage.crisp.chat/users/helpdesk/website/cf1fc9cc00911000/untitled-1_z11yuv.png)



## General

In general, there are four editing options for Containers. **Refer to the screenshot below**:

![](https://storage.crisp.chat/users/helpdesk/website/cf1fc9cc00911000/untitled-2_18bh5fi.png)



### Container Settings

Here, you can set height, width, alignment, and element gaps inside a container.


![](https://storage.crisp.chat/users/helpdesk/website/cf1fc9cc00911000/frame-2_1bboc5m.jpg)


**🔷 Max Width**

The Root Container gets the **Default width** from the Global Settings, while **100% width** fills the entire window width.


![](https://storage.crisp.chat/users/helpdesk/website/cf1fc9cc00911000/gif-recording-2024-02-12-at-54_1i4qzhz.gif)


| 💡 To know more about Global Container and Column Settings, check the documentation below.

[Container and Column Settings | Global Styles](/en/article/container-and-column-settings-global-styles-hxh9x2/)



**🔷 Width Mode**

**In the second container**, you can choose between Custom and Global for its Width Mode. With Custom, you can adjust how much space the **content width** takes up from 1% to 100%. With Global, it follows the width settings set globally. 

**Refer to the GIF below**: 


![](https://storage.crisp.chat/users/helpdesk/website/cf1fc9cc00911000/gif-recording-2024-02-12-at-61_4u5mlh.gif)


**🔷 Min. Height**

You can decide the minimum height for the container. **Refer to the GIF below**: 


![](https://storage.crisp.chat/users/helpdesk/website/cf1fc9cc00911000/gif-recording-2024-02-12-at-61_zowc7d.gif)


**🔷 Containers Height**

The container height offers two choices: **Auto** and **Equal Height**. With **Auto**, the container adjusts its height based on its content. On the other hand, **Equal Height** is useful when you want all containers in a row to have the same height.


**Refer to the GIF below**: 

![](https://storage.crisp.chat/users/helpdesk/website/cf1fc9cc00911000/gif-recording-2024-02-12-at-73_16bcr2c.gif)



**🔷 Horizontal Alignment**

This setting allows you to align the contents horizontally within the container.

**Refer to the GIF below**: 

![](https://storage.crisp.chat/users/helpdesk/website/cf1fc9cc00911000/gif-recording-2024-02-12-at-73_1uvnrh9.gif)



**🔷 Vertical Alignment**

This setting allows you to align the contents vertically within the container.

**Refer to the GIF below**: 


![](https://storage.crisp.chat/users/helpdesk/website/cf1fc9cc00911000/gif-recording-2024-02-12-at-75_wfh36o.gif)



**🔷 Gap Between Elements**

Using this style, you can generate spaces between the elements within a container.

**Refer to the GIF below**: 


![](https://storage.crisp.chat/users/helpdesk/website/cf1fc9cc00911000/gif-recording-2024-02-12-at-75_1k9fhyo.gif)

---


### Advanced Flex Style

Here, you'll find advanced options for customizing flex styles.


![](https://storage.crisp.chat/users/helpdesk/website/cf1fc9cc00911000/untitled-3_cua0u5.png)



**🔷 Content Width**

You can adjust the content width here from 0% to 100% ratio as per your design or requirement.

**Refer to the GIF below**: 


![](https://storage.crisp.chat/users/helpdesk/website/cf1fc9cc00911000/ezgif-4-7ff90d9ac7_1dw4kzc.gif)


**🔷 Direction**

This setting determines the positioning direction of elements within the container.

`→` - Align your element to the right side of the container.

`↓` - Align your element at the bottom of the container.

`←` - Align your element to the left side of the container.

`↑` - Align your element at the top of the container.


**Refer to the GIF below**:


![](https://storage.crisp.chat/users/helpdesk/website/cf1fc9cc00911000/gif-recording-2024-02-12-at-90_9xb3w4.gif)



**🔷 Justify Content**

Using this style will vertically align the elements within a container at the **start**, **center**, **end**, evenly **between**, **around**, or spaced **evenly**.


**Refer to the GIF below**:

![](https://storage.crisp.chat/users/helpdesk/website/cf1fc9cc00911000/gif-recording-2024-02-12-at-90_1ksxiz4.gif)



**🔷 Align Items**

This option enables you to horizontally align all elements within a container, choosing from options such as **start**, **center**, **end**, or **stretched**.


**Refer to the GIF below**:

![](https://storage.crisp.chat/users/helpdesk/website/cf1fc9cc00911000/gif-recording-2024-02-13-at-10_1iohavo.gif)



**🔷 Wrap**

In  `Container`:

- `Wrap`: Allows content to wrap within containers.
- `No Wrap`: Content maintains original size, no wrapping.
- `Reverse`: Reverses wrapping behavior for dynamic adjustments.

**Refer to the GIF below**:

![](https://storage.crisp.chat/users/helpdesk/website/cf1fc9cc00911000/gif-recording-2024-02-13-at-10_1o4o01i.gif)


---

### Individual Container Styles


**🔷 Align Self**

This feature enables containers to position themselves at the top, middle, or bottom, or to stretch according to the adjacent container.

**Refer to the GIF below**:

![](https://storage.crisp.chat/users/helpdesk/website/cf1fc9cc00911000/gif-recording-2024-02-13-at-11_fm9lpv.gif)



**🔷 Order**

When there are multiple containers in a row, you can arrange their order using negative or positive numbers based on their position.

**Refer to the GIF below**:

![](https://storage.crisp.chat/users/helpdesk/website/cf1fc9cc00911000/gif-recording-2024-02-13-at-10_132ot5y.gif)



**🔷 Flex Grow**

It’s a feature that allows an item to grow and occupy available space within a container. If the containers inside the main one don't fill up all the space, you can use flex grow to make them expand.

**Refer to the GIF below**:

![](https://storage.crisp.chat/users/helpdesk/website/cf1fc9cc00911000/ezgif-4-ce05e9df0f_1xaeu5n.gif)



---

### Background

Here, you can customize the container's background with colors, gradients, images, or videos. You can also define hover styles for when users interact with the container.


![](https://storage.crisp.chat/users/helpdesk/website/cf1fc9cc00911000/untitled-4_f1376c.png)



**🔷 Background Color**

You can set the background of a container as a solid color. You can choose the color from the Global color or use the color picker.

**Refer to the GIF below**:


![](https://storage.crisp.chat/users/helpdesk/website/cf1fc9cc00911000/ezgif-3-2d6e67b04a_y2skms.gif)



**🔷 Background Gradient Color**

There are three gradient background color options available for a container. You can choose any gradient color palate from **Simple**, **Advance** & **Library** options as per your design.

![](https://storage.crisp.chat/users/helpdesk/website/cf1fc9cc00911000/untitled-5_1269oyr.png)


**Refer to the GIF below**:

![](https://storage.crisp.chat/users/helpdesk/website/cf1fc9cc00911000/ezgif-3-ce8d348e62_14do7dv.gif)



**🔷 Background Image**

You have the option to set the container's background as an image by either uploading your own or generating one using AI.

**Refer to the GIF below**:

![](https://storage.crisp.chat/users/helpdesk/website/cf1fc9cc00911000/ezgif-3-4db85a9a11_bbvna9.gif)



**🔷 Background Video**

You can add a video to the container's background. Just upload either an MP4 or WEBM video file.

**Refer to the Screenshot below**:


![](https://storage.crisp.chat/users/helpdesk/website/cf1fc9cc00911000/untitled-6_ed959.png)

---

# Related Articles


[Styles tab in Editor](/en/article/styles-tab-in-editor-42a53c/)