---
url: 'https://dxpr.com/hc/documentation/learn-dxpr-builder/tutorials/multi-column-content'
title: 'Lay out content in columns | DXPR'
author:
  name: docs-sync
  url: 'https://dxpr.com/users/docs-sync'
date: '2026-10-23T14:31:17+00:00'
copyright: 'Copyright DXPR. All rights reserved.'
type: article
summary: 'Layouts for different content types'
tags:
  - 'Follow a tutorial'
image: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg'
published: true
og:
  site_name: DXPR
  updated_time: '2026-10-23T14:31:17+0000'
  'image:alt': 'DXPR, powered by Drupal: AI-powered Drupal for marketers.'
schema:
  '@context': 'https://schema.org'
  '@graph':
    -
      mainEntity: {  }
    -
      '@type': TechArticle
      headline: 'Lay out content in columns'
      description: 'Layouts for different content types'
      image:
        '@type': ImageObject
        url: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg'
        width: '1200'
        height: '630'
      datePublished: '2026-10-23T14:31:17+0000'
      dateModified: '2026-10-23T14:31:17+0000'
      author:
        '@type': Organization
        '@id': 'https://dxpr.com/#organization'
        name: DXPR
        url: 'https://dxpr.com/'
        logo:
          '@type': ImageObject
          url: 'https://dxpr.com/themes/custom/dxpr_com/dxpr-logo-dark.svg'
          width: '1348'
          height: '501'
      publisher:
        '@type': Organization
        '@id': 'https://dxpr.com/#organization'
        name: DXPR
        url: 'https://dxpr.com/'
        logo:
          '@type': ImageObject
          url: 'https://dxpr.com/themes/custom/dxpr_com/dxpr-logo-dark.svg'
          width: '1348'
          height: '501'
      mainEntityOfPage: 'https://dxpr.com/hc/documentation/learn-dxpr-builder/tutorials/multi-column-content'
      articleSection: 'Follow a tutorial'
    -
      '@type': WebPage
      '@id': 'https://dxpr.com/hc/documentation/learn-dxpr-builder/tutorials/multi-column-content'
      description: 'Layouts for different content types'
      breadcrumb:
        '@type': BreadcrumbList
        itemListElement:
          -
            '@type': ListItem
            position: 1
            name: Home
            item: 'https://dxpr.com/'
      publisher:
        '@type': Organization
        '@id': 'https://dxpr.com/#organization'
        name: DXPR
      inLanguage: en
---
[Help Center](/hc)/[Documentation](/hc/documentation) /[Learn DXPR Builder](/hc/documentation/learn-dxpr-builder) /[Build pages](/hc/documentation/learn-dxpr-builder/build) /[Follow a tutorial](/hc/documentation/learn-dxpr-builder/tutorials/overview) # Lay out content in columns.

Layouts for different content types

 Learn DXPR BuilderBuild pagesFollow a tutorial

   ## In this guide

 Related guides

- [Rows and Columns](/hc/documentation/learn-dxpr-builder/layout/rows-and-columns)
- [Sections](/hc/documentation/learn-dxpr-builder/layout/sections)

Here you build one page with the four column layouts you will use most: content with a sidebar, two equal halves, three thirds and four quarters. Each gets a heading above it. Use it to learn which preset fits which content. For every row setting, see [Rows and columns](/hc/documentation/learn-dxpr-builder/layout/rows-and-columns).

The video builds a council's waste collection page.

  ## Before you start

- Your role has the **Edit with DXPR Builder** permission.
- The page is open in the builder. For a new one, go to **Content** > **Add content** > **Landing Page** (`/node/add/landing_page`) and click **Save**.
- New elements land at the top of their section. That is why each heading goes in after its row: it lands above it.

## Choose a layout

| Layout | Best for | Preset |
|---|---|---|
| Content with a sidebar | articles with related links | **2/3 + 1/3** |
| Two equal halves | comparisons, before and after | the row's default |
| Three equal thirds | feature highlights, services | **1/3 + 1/3 + 1/3** |
| Four equal quarters | statistics, small cards | **1/4 + 1/4 + 1/4 + 1/4** |

A new **Row** arrives with two equal columns. Every other layout comes from the row's grid icon (**Column layout**).

## Step 1: content with a sidebar

1. Click **Add Elements** on the empty page and pick **Section** from the **Layout** tab.
2. Click **+** on the section and pick **Row**. Click its grid icon (**Column layout**), pick the **2/3 + 1/3** preset and click **Save**.
3. Click **+** in the wide column and pick **Text** from the **Content** tab. Type the article, set the first line to **Heading 3** and click **Save**.
4. Click **+** in the narrow column and pick **Text**. Type "Related" as **Heading 4**, add one line per related page and click **Save**.
5. Click **+** on the section and pick **Text**; it lands above the row. Type "Content with a sidebar" as **Heading 2** and click **Save**.

## Step 2: two equal halves

1. Hover the section and click **Add Section Below**. Open the new section's **More** > **Settings**, pick a light grey **Background** in the **Style** panel and click **Save**.
2. Click **+** on the section and pick **Row**. Two equal columns is the default, so there is nothing to change.
3. Add a **Text** element in each column: "Before" and "After" as **Heading 4** with one line each.
4. Add the heading "Two equal halves" the same way as in Step 1.

## Step 3: three equal thirds

1. Add a third section with **Add Section Below** and give it the **Align text center** class.
2. Add a **Row**, click its grid icon (**Column layout**), pick the **1/3 + 1/3 + 1/3** preset and click **Save**.
3. Add a **Text** element in each column: "Paper", "Glass" and "Organic" as **Heading 4** with one line each.
4. Add the heading "Three equal thirds".

## Step 4: four equal quarters

1. Add a fourth section with a light grey **Background** and the **Align text center** class.
2. Add a **Row**, click its grid icon (**Column layout**), pick the **1/4 + 1/4 + 1/4 + 1/4** preset and click **Save**.
3. Add a **Text** element in each column: the day as **Heading 4** and what is collected.
4. Add the heading "Four equal quarters".

## Step 5: save and preview

1. Click **Save** on the builder toolbar.
2. Open the view menu (the **eye icon**) and choose **Preview**.

## On smaller screens

Columns sit side by side from 768 pixels wide, so tablets show the same layout as desktops. On phones each column takes the full width, and the columns stack in their order. For another layout on tablets, click the row's grid icon (**Column layout**) and choose **Add screen size**.

## Go further

Not shown in the video:

- **Narrow, wide, narrow**: the **1/4 + 1/2 + 1/4** preset keeps long text readable with empty margins.
- **Mirror row**: switch it on in the row's settings to swap the columns on tablets and desktops. Phones keep the original order, so the first column still comes first there.

## What you see

Four bands follow each other, each with its heading on top. The article and its related links share the first, two halves sit on grey, and three centred thirds come next. Four centred quarters on grey close the page.

## If you don't see the columns as shown

- **The row has the wrong number of columns.** The preset applies only when you click **Save** in the layout dialog. Click the row's grid icon (**Column layout**) again, pick the preset and click **Save**.
- **A heading sits under its row.** The heading went in before the row, and new elements land at the top of their section. Drag the heading above the row by the drag handle on its control bar.
- **The columns stack on a tablet.** The tablet is narrower than 768 pixels, such as a small tablet in portrait. Add a layout for that width with **Add screen size** in the row's layout dialog.
- **Your changes are gone after a reload.** You left the page before clicking **Save** on the builder toolbar. If Save shows an error, see [Changes do not save](/hc/documentation/learn-dxpr-builder/troubleshooting/saving-fails).

## What's next?

- [Rows and columns](/hc/documentation/learn-dxpr-builder/layout/rows-and-columns) for every row setting
- [Sections](/hc/documentation/learn-dxpr-builder/layout/sections) for section backgrounds and widths