# Multicolumn

<div data-full-width="true"><figure><img src="/files/dHaPBf9wiTvRsPXBrcnP" alt=""><figcaption><p><a href="https://foxecom.com/pages/affiliate?utm_source=foxecom&#x26;utm_medium=help_center_foxify_multicolumn&#x26;utm_campaign=anchor-text&#x26;utm_term=explore_foxecom_affiliate_program_perks_now">Explore FoxEcom Affiliate program perks now</a> <span data-gb-custom-inline data-tag="emoji" data-code="2728">✨</span></p></figcaption></figure></div>

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

You can utilize a multicolumn section to showcase your store's services and other details.

## Customize a multicolumn section header

First, you need to add a multicolumn section to your page. Choose a preset that best fits your needs.

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

In your section header block, you can easily add, remove, or reorder child blocks.

* Child block can be a heading, sub-heading, or rich text.

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

## Customize your multicolumn grid

### Grid settings

#### Layout settings

<figure><img src="/files/s12grObMBD2uHxFsztHR" alt="Multicolumn grid layout settings"><figcaption></figcaption></figure>

Here you can set your column layout for column elements and image /icon for vertical alignment.&#x20;

* Vertical alignment settings work with horizontal layout only.

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

{% tabs %}
{% tab title="Vertical layout" %}

<figure><img src="/files/bZgQFTIiIsIQVHHLprkI" alt="multicolumn grid vertical layout"><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Horizontal layout" %}

<figure><img src="/files/IKYH4sfXHSAQRywprreJ" alt="multicolumn grid horizontal layout"><figcaption></figcaption></figure>
{% endtab %}
{% endtabs %}

#### Desktop layout

Select your number of columns between 1 and 12 and the column gap by tweaking the toggles.

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

#### Mobile layout

Similar to desktop layout, mobile layout lets you set your number of columns shown on mobile view (1 column/2 columns) and the column gap.

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

Check **Enable swipe on mobile** to display the blog posts grid in horizontal order with a slider on mobile view.

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

## Customize your column

You can add and edit a maximum of **nine** child blocks to each column in the multicolumn section, namely:

* Image
* Icon
* Heading
* Text
* Button
* Add to cart button
* Buy now button
* Block
* Custom code

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


---

# 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.foxecom.com/foxify-app/legacy-editor/sections-and-presets/multicolumn.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.
