Webflow Layout Techniques

Column Layouts

No items found.
Overview
Responsive Layout Techniques
Intro
102
Element Layouts
Aspect Ratio
Int
201
Responsive Image Annotations
Int
6:50
202
Collection List Alternating Item Layouts
Int
4:32
601
Collection Page & Collection List Layouts
Collection List Card Layouts
Int
4:32
601
Creating Variable Layout Options, per Collection Item
Int
11:46
602
Random List Items on Every Page Refresh
Intro
10:00
603
Variable Collection Item Sizes in a Grid Layout
Int
603
Limit Collection List Items by Breakpoint
Intro
10:00
604
Hide Collection List on Empty, or Item Qty
Intro
605
Responsive Pagination
Intro
605
Masonry Grid Layouts
Intro
607
Glossary w/ Letter Groupings
Intro
612
Master-Detail Layouts
Master-Detail Layouts
Intro
710
CMS-Driven Expando
Intro
19:42
714
CMS-Driven Modals
Intro
715
Special Layouts
Creating Leader Lines
Int
5:54
821
Photo Gallery Layouts
Int
821
Column Layouts
Int
822
Text Layouts
Int
823
Checkerboard Grid Styling
Int
824
Advanced Techniques
Breakpoints
Adv
901
No items found.

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.

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

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

Table of Contents
Did we just make your life better?
Passion drives our long hours and late nights supporting the Webflow community. Click the button to show your love.