How do I set text columns in Webflow?

Set the column count on the text

Text columns let one element use the horizontal space as a newspaper would: the words fill the first column, then continue at the top of the next. This is not a row of cards. A grid you build on a Box, and a Quick Stack, place separate cells. The grid guide is that layout. This page is the column count on text.

Select the text element on the canvas. Open Style panel, Typography, More type options, and set the count in the Columns field. The default is auto, which is one column. Type the number you want, such as 2.

The same control can apply to other elements, including a form. Webflow's text columns article says the setting is for text elements and for other elements such as forms. Use it when that whole element should flow in columns.

Example: an about page has one long paragraph under the intro. Select that paragraph, set Columns to 2, and leave the heading above it as a normal heading. The paragraph is what splits. The heading stays a single line across the page until you put it inside the column element, which is the next section's choice.

Add a gap or a line between columns

The default gap is 0. Two columns with a gap of 0 sit against each other, which can look like one block of text with a strange rag in the middle. Set a gap in the column properties so the columns separate.

Example: the about paragraph is 2 columns with a gap of 24px. The first column ends, there is a clear space, and the sentence continues in the second column. If you wanted a hairline between them, add a divider. Webflow describes the divider as a line or rule between the columns, and you can set its style, width, and color.

Leave the divider off when the gap is enough. A line between short columns can look heavier than the paragraph. Check the color against the page background the same way you would check body text. The font size guide is the size and line height of that paragraph. Columns do not set either one.

If the element is a form, the gap is the space between the columns of fields, not the padding inside a single input. Set the count, then tab through the form on the canvas and confirm the labels still sit with their fields.

Let a heading span every column

Once the columns property is on an element, anything inside it is a column child. Children wrap into the next column by default. Their span setting starts at don't, which means they do not cross the columns.

If a heading should sit across every column, put it inside the element that has the columns, select the heading, and set span to do. Webflow's article says a heading can span all columns or wrap inside its own column. Do is the span. Don't is the wrap.

Example: a Box holds a heading, 'From the archive', and two paragraphs. You set columns on the Box, not on one paragraph. The paragraphs flow in two columns. The heading is selected, and span is set to do, so the title runs across both. If the heading is still stuck in the first column, span is still don't, or the heading is outside the element that has the columns.

Do not set span on the element that owns the columns and expect the children to change. Span is a setting on the child. The count stays on the parent.

Use one column on a phone

A two-column paragraph that is comfortable on a wide canvas is hard to read on a phone. Each column becomes a narrow strip. Webflow's guidance is to open the mobile view and set the column count to auto, so the content displays in one column.

Auto on that breakpoint does not remove the desktop count. Styles on a smaller breakpoint can differ from the wider one. Set auto on the mobile view, then check the desktop canvas and confirm it still shows 2.

Example: About body is 2 columns on the desktop canvas and auto on the mobile view. The heading that spans on desktop can stay a normal heading on the phone, because there is only one column. Read both widths before you publish. If the phone still shows two strips, the mobile view still has a number in Columns.

A gap you set on desktop may be more space than a single phone column needs. Look at the space above and below the paragraph after you switch to auto. Adjust that breakpoint if the gap you added for two columns now looks like an empty band.

Read the published page

Publish the site, then open the page on a wide window and on a phone. On the wide window you should see the count you set, the gap, and the divider only if you added one. On the phone you should see one column when that view is set to auto.

Select a sentence that starts near the bottom of the first column and confirm it continues at the top of the next, not in a separate text block beside it. If the second column is a different element you dragged in, you built a layout, not text columns. Put the copy in one element and set Columns there.

If every paragraph on the site split into columns, you styled a tag rather than this element. Move the count onto the element that should split, clear it from the tag, and publish again.

Columns on a page you already have are ordinary layout work. The membership is one plan for every existing Webflow site: $999 per month, including 10 hours of Webflow work. Additional work is $75 per hour and starts only after you approve a written estimate.