Layout Library

The comps in Figma use a 12 column grid. Webflow is not able to handle the various layout differences so we have created our own content wrappers to match the width changes per breakpoint. We use percentages.

There a few variations for some one-offs but the majority of content should be wrapped in one of the wrapper divs below.

< back to Styles Menu
grid-list--ones
grid-list--ones-item
grid-list--ones-item
grid-list--ones-item
grid-list--twos
grid-list--twos-item
grid-list--twos-item
grid-list--twos-item
grid-list--twos-item
grid-list--threes
grid-list--threes-item
grid-list--threes-item
grid-list--threes-item
grid-list--threes-item
grid-list--threes-item
grid-list--threes-item
wrapper--100dtm
desktop
tablet
mobile
Class = wrapper--100dtm

desktop, tablet, mobile
12 cols / 100%
wrapper--83dtm
desktop
tablet
mobile
Class = wrapper--83dtm

desktop, tablet, mobile
10 cols / 83%
wrapper--83d-100tm
desktop
tablet
mobile
Class = wrapper--83d-100tm

desktop
10 cols / 83%

tablet, mobile
12 cols / 100%
wrapper--83dt-100m
desktop
tablet
mobile
Class = wrapper--83dt-100m

desktop, tablet
10 cols / 83%

mobile
12 cols / 100%
wrapper--66d-100tm
desktop
tablet
mobile
Class = wrapper--66d-100tm

desktop
8 cols / 66%

tablet, mobile
12 cols / 100%
wrapper--66dt-100m
desktop
tablet
mobile
Class = wrapper--66dt-100m

desktop, tablet
8 cols / 66%

mobile
12 cols / 100%
wrapper--66d-83t-100m
desktop
tablet
mobile
Class = wrapper--66d-83t-100m

desktop
8 cols / 66%

tablet
10 cols / 83%

mobile
12 cols /100%
wrapper--50d-100tm
desktop
tablet
mobile
Class = wrapper--50d-100tm

desktop
6 cols / 50%

tablet, mobile
12 cols /100%
wrapper--50d-83tm
desktop
tablet
mobile
Class = wrapper--50d-83tm

desktop
6 cols / 50%

tablet, mobile
10 cols / 83%
wrapper--50dt-100m
desktop
tablet
mobile
Class = wrapper--50dt-100m

desktop, tablet
6 cols / 50%

mobile
12 cols / 100%
wrapper--50d-66t-100m
desktop
tablet
mobile
Class = wrapper--50d-66t-100m

desktop
6 cols / 50%

tablet
8 cols / 66%

mobile
12 cols / 100%