Columns element

The Columns element is a structural container that allows you to break the default vertical stacking of the page. You can split a row into up to 6 distinct columns, controlling the spacing and alignment of the content inside.

This page covers how to create multi-column layouts to organize elements side-by-side.

Overview

A column container serves as a foundational element in organizing your application. It allows you to arrange content for an intuitive user experience. With column containers, you gain the flexibility to structure and customize your layout.

  • Structure: Splits the page width into 1, 2, 3, 4, 5, or 6 equal sections.
  • Container: You drag other elements (Text, Images, Forms) inside the column slots.
  • Alignment: You can vertically align content (e.g., center a button next to a tall text block).
  • Responsiveness: Columns automatically stack vertically on smaller mobile screens for readability.

Baserow column Layout

Add columns

  1. Open the Elements panel (click the + icon).
  2. Select Columns.
  3. Drag and drop the element onto your canvas.
  4. You will see empty slots (dashed boxes) appear on the canvas.

Add content to columns

Once the structure is in place, you must populate it.

  1. Add a new element (or select an existing one).
  2. Drag it into one of the empty column slots.
  3. You can stack multiple elements inside a single column slot (e.g., a Heading above a Text block within the left column).

Configuration

Click the Columns element to open the General properties tab.

1. Column Layout

Choose the number of vertical sections.

  • Range: Select between 1 and 6 columns.
  • Behavior: Columns are equal width. For example, selecting “2” creates a 50%/50% split. Selecting “3” creates a 33%/33%/33% split.

2. Space between columns (Gap)

Define the horizontal whitespace between each column slot.

  • Input: Enter a value in pixels (e.g., 20).
  • Limit: Maximum value is 2000.
  • Use Case: Increase this value to prevent dense text blocks from looking cluttered.

Space between columns

3. Vertical alignment

Control how elements sit relative to each other when column heights differ. This is critical when placing a small element (like a button) next to a tall element (like a paragraph).

Option Behavior Use Case
Top Content aligns to the top edge. Standard text layouts.
Middle Content centers vertically. Centering a button next to a tall image.
Bottom Content aligns to the bottom edge. Aligning footer links or “Read More” buttons.

Column Vertical alignment

Frequently asked questions (FAQ)

What happens on mobile devices?

To ensure your application is mobile-friendly, Baserow automatically “stacks” the columns. On a phone screen, Column 1 will appear at the top, followed by Column 2 beneath it, and so on.

Can I change the background color of a column?

The Columns element itself is purely structural and does not have visual styling properties like backgrounds or borders. To add a background, you should style the specific elements inside the column (e.g., add a Container or styled Group if available, or style the individual text/image elements).

Can I nest columns?

Currently, you cannot place a Columns element inside another Columns element. To achieve complex grids, try using a Table or Repeat element depending on your data needs.

Related content

Still need help? If you’re looking for something else, please feel free to make recommendations or ask us questions; we’re ready to assist you.