Skip to main content
Unlayer Docs
Version: 1.468.0

Columns

Columns are a fundamental part of the builder's layout system. They allow end-users to organize content in flexible, responsive grids, making it easy to design structured layouts for emails, web pages, or popups. Columns divide the available space in a block into separate sections, where different content elements like text, images, or buttons can be placed.

Column Layout Example

How Columns Work​

The builder operates on a 12-column grid system. This means that the width of the entire row is divided into 12 equal parts, and you can allocate any number of these parts to a column. The sum of all column widths within a block must always equal 12, ensuring the content fits perfectly into the layout.

Example Layouts​

Here are some examples of how columns can be used in the builder:

  • Single Column Layout: Takes up the full width (12/12 columns).
  • Two Column Layout: You can divide the row into two equal parts, each column taking up 6 parts of the grid (6/12 + 6/12).
  • Three Column Layout: Three columns can be defined with equal or unequal widths, as long as the total is 12 (e.g., 4/12 + 4/12 + 4/12 or 3/12 + 3/12 + 6/12).

Flexibility in Design​

Columns provide immense flexibility in how content is displayed. You can:

  • Organize content into distinct sections side-by-side (like text next to an image).
  • Create complex layouts with varying column sizes to suit your design needs.
  • Ensure responsiveness by stacking columns on smaller screens, such as mobile devices, where the content is automatically adjusted to fit the screen width.

Managing Columns in the Builder​

In the builder, end-users can easily manage columns. They can:

  • Add or remove columns to structure their layout.
  • Resize columns by adjusting the width of each section using the drag handles.
  • Reorder content within columns by dragging and dropping elements between them.

Predefined Columns​

The predefined columns feature allows developers to add default blocks with specific column configurations to the builder. Learn More

Disable Columns​

This feature allows developers to configure the builder to remove the ability to create or edit multi-column blocks. Learn More

Locking columns​

When on Editor Mode, you can mark individual columns as "Locked" or "Non Deletable" to prevent your users from removing them from the template or editing their content. Learn More