Column Layouts

When you want magazine or newspaper-like columns that flow downward and then across, HTML 5 delivers.

Webflow provides column layout support directly in the designer.

• Columns
• Use Text Columns in Webflow

FAQs

How do I prevent column breaks from happening inside of a specific element group?

CSS has a rule for this;

_{column-break-inside: avoid;}

_{-webkit-column-break-inside: avoid;}

To apply this in Webflow, add a class to the element inside of your columnated area, which you do not want breaking to occur within. Usually this will a Collection Item, but it can be any grouping of content that you place in a DIV.

Let's name that class _{No Column Break}.

Then, on your page place an HTML Embed with this code;

_{<style>
.no-column-break {
 column-break-inside: avoid;
 -webkit-column-break-inside: avoid;
}
</style>}

The reason to place it in an HTML embed, rather than in your page custom code, is that in an embed it will affect your designer view as well, rather than just the published version of the site.

Technical notes

• How to prevent column break within an element - Geeks for Geeks

References

Unsorted, unreviewed, but here for you anyway...

https://www.youtube.com/watch?v=OZQdpWQyRTo

https://www.youtube.com/watch?v=FelQVWd3gm0

https://www.youtube.com/watch?v=UYFsto4NSLM

https://www.nikolaibain.com/blog/better-webflow-columns

https://www.nikolaibain.com/videos/webflows-hidden-cms-column-grid-feature

‍

‍

‍

‍