What is the new feature that Webflow has announced for dividing layout/text into columns?
TL;DR
- Use Webflow's new Columns feature by selecting an element, then setting the number of columns and gap in the Style panel under Layout.
- Enables responsive, semantic multi-column layouts for rich text without custom code or complex workarounds.
Webflow recently announced support for the native CSS columns property, enabling users to divide text or layout blocks into multiple columns — similar to print-style layouts — without custom code or flex/grid workarounds.
1. About the Columns Feature
- This feature leverages the CSS Multi-column Layout module, allowing content (especially text) to automatically flow into multiple columns.
- It's designed for rich text elements, though it can be applied to other containers for layout flexibility.
2. How to Use It
- Select the Element (e.g., a Rich Text Block or Div Block).
- In the Style panel, scroll to the Layout section.
- Find the Columns setting and specify the number of columns you want (e.g., 2 or 3).
- You can also control column gap, and in some cases Webflow may expose settings for column rule (the line between columns).
3. Benefits of This Feature
- Provides clean, semantic layout control without relying on extra divs, flexbox, or grid.
- Makes it easier to create magazine-style layouts or split content naturally across columns.
- Fully responsive — you can adjust the number of columns per breakpoint.
4. Limitations to Know
- Text will automatically flow between columns; manual control over where columns break is limited.
- Some elements inside columns (like images or videos) may need refinement for consistent column behavior.
Summary
Webflow’s new native columns feature adds direct support for the CSS columns property, allowing multi-column text layouts inside the designer. It simplifies rich text formatting and layout styling without relying on workarounds or custom code.