What is the new feature that Webflow has announced for dividing layout/text into columns?

Webflow recently introduced a new feature called CSS Columns, which allows you to divide layout or rich text into multiple vertical columns.

1. What Is the CSS Columns Feature?

• CSS Columns let you define how content flows vertically into multiple columns, similar to print-style editorial layouts.
• Unlike Flexbox or Grid, CSS Columns handles the splitting of flowing text across columns automatically.
• This feature is supported on any layout element, including Rich Text blocks.

2. How to Use CSS Columns in Webflow

• Select an element where you want to apply column splitting (e.g. a div block or rich text element).
• In the Style panel, scroll to the Layout section.
• Under the new "Columns" setting, specify the number of columns and optionally set a gap between them.
• Content inside the element will automatically reflow based on the settings.

3. Key Benefits of CSS Columns

• Automated flow of text across columns without manually creating multiple containers.
• Great for blog posts, magazine-style layouts, or multi-column text blocks.
• Responsive control: columns adapt naturally to screen size and can be customized with breakpoints.

4. Limitations to Be Aware Of

• Columns may not behave predictably with complex nested elements like additional divs or non-text items.
• Fine-grained control (e.g., widows/orphans or forcing column breaks) is limited compared to Grid/Flexbox.

Summary

CSS Columns is a new Webflow feature that allows you to split flowing content—especially text—into multiple vertical columns with ease. You can apply it directly in the Style panel, making it ideal for editorial and multi-column layouts within a single element.