What is the new feature that Webflow has announced for dividing layout/text into columns?
TL;DR
- Apply CSS columns by selecting a text or div element, then setting the number of columns and optional styling (gap, rule) in the Style panel's Layout section.
- Ideal for flowing, text-heavy layouts like magazines, but limited in precise control and compatibility with interactions or non-text content.
Webflow recently introduced CSS columns as a new layout feature, allowing you to divide text and other content into multiple vertical columns without using grids or flexbox.
1. What Are CSS Columns?
- CSS columns enable text or any flowable content to automatically wrap across multiple columns, similar to print magazine layouts.
- Unlike grid or flexbox, CSS columns don’t require manual element placement—Webflow handles the flow automatically.
2. How to Use CSS Columns in Webflow
- Select the element (typically a text block or div) you want to apply columns to.
- In the Style panel, scroll to the Layout section.
- Locate the new Columns setting (not to be confused with Grid columns).
- Set the number of columns you want (e.g., 2, 3, or more).
- Optional: Adjust column gap and enable column rule (border between columns).
3. Use Cases for CSS Columns
- Breaking up long paragraphs into more readable formats.
- Creating magazine-style layouts.
- Designing responsive footers or side-by-side content areas without complex structure.
4. Key Limitations
- Elements inside columns follow a top-to-bottom, then left-to-right reading order.
- CSS columns work best with text-heavy content—not ideal for precise layout control of images or fixed components.
- Not all interactions or flex properties can be applied consistently inside column flows.
Summary
Webflow’s new CSS columns feature allows you to split content into multiple vertical columns using native styles, making it easier to build flowing layouts similar to magazines—without complex grids or manual placement.