Use text columns in Webflow

Create columnar text that applies to text elements and other elements, like forms that use the text columns property.

This video features an old UI. Updated version coming soon!
This video features an old UI. Updated version coming soon!

With text columns, you can use horizontal space efficiently and maintain readability. In the Style panel, you can create columnar text that applies to text elements and other elements, such as forms. You can also set headings to span multiple columns or wrap within their column.


To wrap your content in multiple columns, set the column count, or number of columns, in the input field.

Open the text column properties to customize the column settings.

Column count

The default value in the column count input field is set to auto, or one column.

You can specify the number of columns in the column input field. To make sure content displays in one column on mobile devices, open the mobile view and set the column count to auto.

Text column properties

Once you’ve specified the number of columns, open the text column properties next to the column count input.

Here, you can define the gap between your columns, add and style a column divider, or set a column child to span all columns.


The default gap (the space between columns) is 0 px. You can customize it in the column properties.

Learn more about input values and units.

Divider settings

You can add a divider (a line or rule) between the columns if you’re going for a newspaper look. You can customize the style, width, and color of this divider here.


Choose between the following line styles:

  • No rule (x)
  • Solid ————
  • Dashed -------
  • Dotted …….


Use the selector or input field to specify how thick your divider is. You can use both integers and decimals.


Specify the color of this divider by typing the color value or name in the input field or using the color picker.

Column child

Once you apply the columns property to an element, any element inside becomes a column child. By default, column children wrap to the next column — their span setting is set to “don’t.” You can override this setting for specific children.


By default, column children are set to don’t span. If you want an element, such as a heading, to span all columns, select the element and change the span setting to “do”.

Clone this project
Try Webflow — it's free

Production for this lesson

Directed by


Produced by


Written by


Article by


Edited by


Designs by


Need more help? Want to report a bug? Contact support
Have feedback on the feature? Submit feature feedback