Typographic Masonry Grid

Design help General
1

Hi,

Am looking to emulate the typographic masonry grid seen here.

I am having trouble ensuring content from a single project stays in a single column, is there some way that I can signal to the browser to keep specific content from wrapping onto the next column?

As alternatives I have tried the webflow grid (doesn’t do masonry) and plain divs (but unsure how to reorganize content from 3 col to 2 col for tablet)

It’s important this method can also scale down to 2 columns on tablet and 1 for mobile.

Thanks for any help!

Read only link

This is what Im looking to achieve:

Forum-20-20
Forum-20-203368×1923 260 KB

2

May I suggest…

image
image174×530 10.7 KB

It won’t go to two columns on tablet because there is plenty of room. You can format it otherwise though.

1 Like
3

Thanks for your answer — ended up not scaling back from 3 cols to 2 for tablet.

1 Like