---
title: "Setting up the layout with columns"
url: "https://support.acendy.com/en/article/layout-columns-for-design-structure"
language: "en"
last_updated: "2026-05-29T06:30:13.606Z"
---

# Setting up the layout with columns

The Design builder uses a two-level column system to control how content is arranged on a page. At the section level, you define a grid. At the block level, you control how much of that grid each individual block occupies. Together, these two settings give you precise layout control across desktop, tablet, and mobile.

* * *

## How columns work

Every section that supports columns maintains a CSS grid. The grid is defined by how many columns it has — say, 4 on desktop. Each block inside that section declares how many of those columns it spans. A block spanning 2 out of 4 columns takes up half the width.

In short: **section column count** sets the total divisions, and **block column width** sets how wide each piece of content is within that grid.

Both settings are independent per breakpoint — you can have 4 columns on desktop, 2 on tablet, and 1 on mobile. The layout shifts automatically as the screen size changes.

![](https://cdn-assets.productfruits.com/c644ce11-7d42-4bfb-b0ec-6d6da3e9093f)

* * *

## Section column settings

Column settings on a section define the overall grid. You'll find them under the **Layout** group in the section's settings panel. They're only visible when **Advanced mode** is turned on.

| Setting | What it controls | Range | Default |
| --- | --- | --- | --- |
| Columns — desktop | Number of grid columns on large screens | 1–8 | 6 |
| Columns — tablet | Number of grid columns on medium screens | 1–8 | 4 |
| Columns — mobile | Number of grid columns on small screens | 1–8 | 2 |
| Column gap | Spacing between columns | 0–4 | 4 |

The gap values follow the theme's spacing scale. 0 removes all space between columns; 4 gives the widest gap.

### Which sections support column count

Column count settings appear across several section types, not only the dedicated Columns section:

-   **Columns** — the main flexible layout section with full column control
-   **Footer** — lets you arrange footer blocks (about us text, menus, newsletter signup) side by side
-   **Header builder** — distributes header elements horizontally across the bar
-   **Blog** — controls how many blog post cards sit in a row
-   **Contact us** — arranges content blocks in a multi-column layout

* * *

## Block column width settings

Each block inside a section has its own width setting that controls how many of the section's columns it spans.

| Setting | What it controls | Range | Default |
| --- | --- | --- | --- |
| Width — desktop | Column spans on large screens | 1–8 | 1 |
| Width — tablet | Column spans on medium screens | 1–8 | 1 |
| Width — mobile | Column spans on small screens | 1–8 | 1 |

A block set to width 1 occupies one column cell. In a 4-column section, a block set to width 2 takes up half the row. Two blocks at width 2 sit side by side and fill the entire row.

Width settings are available on most content blocks used inside the Columns section — text, image, icon box, image box, testimonial, typography, video, countdown, logos, and others.

![Desktop 4 columns vs mobile 2 columns](https://cdn-assets.productfruits.com/97e5112e-7ced-45b3-a05c-dfae4641caf1)

* * *

## Display mode: grid or carousel

The **Columns** section has a **Display mode** setting that changes how the grid renders:

-   **Regular** — a standard CSS grid. Blocks flow into the grid according to their column width settings.
-   **Carousel** — blocks are arranged in a horizontally scrollable carousel. Column count and gap settings still apply to the carousel layout.

When Carousel is active, extra settings appear: autoplay, loop, show or hide pagination dots, show or hide arrows, arrow color, arrow size, and autoplay interval (in milliseconds).

* * *

## Practical examples

**A simple 3-column feature row**  
  
Set the section to 3 columns on desktop, 2 on tablet, 1 on mobile. Add three icon box blocks, each with width 1. They sit side by side on desktop, shift to 2+1 on tablet, and stack to a single column on mobile.

**A 4-column section with one wide featured block**  
  
Set the section to 4 columns. Add one block with width 2 and two blocks with width 1 each. The wide block takes the left half; the two narrow blocks fill the right.

**A footer with unequal columns**  
  
In a Footer section set to 4 columns, set an "About us" block to width 2 (half the footer). Add two menu blocks at width 1 each to fill the remaining half.

* * *

## Tips

-   Column settings are hidden until **Advanced mode** is enabled. Look for the toggle at the top of the section or block settings panel.
-   If a block's width exceeds the section's column count, it spans the full row. A width-5 block in a 4-column section fills the entire width.
-   The **product slider** and **product purchase** sections only expose block width settings — there's no column count setting, because the grid is managed automatically for those sections.