# Columns

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

## Content

### Column number

You can adjust the column number and type by selecting the option (as photo) or clicking ![](/files/sR5jDtySmzM6FOUXMXgn)

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

### Column width

It allows you to change the width of columns

### Column gap

It allows you to change the gap between columns

## Advanced

### Section styling

<figure><img src="/files/2QmajnDBsXsVLgZN4ohB" alt=""><figcaption></figcaption></figure>

#### **Background color:**&#x20;

Apply background color of the Column block.

#### **Background image**

* ***Browse Image:*** Image Selection
* ***Image URL***: A web address that specifies the location of an image
* ***Image Position***: This setting allows you to position your image within the frame of your screen such as left top, left center, right top, right center, etc.
* ***Image Repeat***: Sets how background images are repeated (Repeat, Repeat horizontal, repeat vertical, etc.)
* ***Image Size***: How an image should be resized to fit its container
  * ***Contain***: The image keeps its aspect ratio but is resized to fit within the given dimension
  * ***Cover***: The image keeps its aspect ratio and fills the given dimension. The image will be clipped to fit
  * ***Auto***: The image keeps its aspect ratio and fills the given dimension automatically

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

#### **Spacing**

* ***Inner Spacing (Padding)***: \
  \&#xNAN;***Padding*** is inside the border (or edge) of your element. Increasing the padding will “push” your content into the middle of your box, away from your borders. If you remove the padding, your content will take up the entire box
* ***Outer Spacing (Margin)***: \
  \&#xNAN;***Margin*** is on the outside of the border of your element. If you increase the margin, it will increase the space between this element and the ones next to it. If you remove your margin, there will be no extra space between your elements

#### Z-Index

* The z-index property specifies the stack order of an element
* An element with greater stack order is always in front of an element with a lower stack order

#### Custom ID attribute

The ID of a block, which is used in ***Custom CSS, Custom Javascript***

#### Custom Class attribute

The class of a block, which is used in ***Custom CSS, Custom Javascript***

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

### Column styling

Column styling is the configuration of each column, its settings are the same as [Section styling](#section-styling). The number of menu changes depending on how many columns you have set up.&#x20;

<figure><img src="/files/2oqIbvx7qONbMpOOhs5y" alt=""><figcaption></figcaption></figure>

### Responsive Design

The specific settings in this section will vary depending on device type designing

**Desktop mode**:

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

* **Hide on Desktop:** Hide the Column block when recipient reads the email template on Desktop.

&#x20;

**Mobile mode**:

<figure><img src="/files/9Crz1jAY4NdBljgk9jLH" alt=""><figcaption></figcaption></figure>

* **Hide on Mobile:** Hide the Column block when recipient reads the email template on Mobile.
* **Do Not Stack on Mobile:** Text do not stack when recipient views the template on Mobile.

### Display condition

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

You can set the condition to display the block

* ***Condition***: It includes ***None, Show when, Hidden when***
* ***Field***: It contains ***Business Object attributes***
* ***Index***: The number of the row in the ***Business Objects Data table***
* ***Operator***: It includes ***contains, does not contain, starts with, doesn't start with, ends with, doesn't end with***, etc.
* ***Value***: you can input the value or select an ***attribute from Business Object or Event***


---

# 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.antsomi.com/cdp-365-user-guide-en/marketing-hub/email-template/settings/blocks-and-settings/columns.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.