A. Uneven cols layout
Same height diff width - its easier to solve:
By webflow columns
-or- by custom flex grid (By deafult the height of flex cols is even).
Great trick her (Follow the course if you want):
In general its easier to work with background-images (Background-size: cover) for this layout - but it less semantic/Seo freindly/accsesbaility
B. Masonry
More complex. The “official” ± name of this layout is masonry (bricks) -
- Famous example: Pinterest.
- Famous library:
https://masonry.desandro.com/
You could get masonry by flexbox (Example) - but most of the time with JS you get better results (Webflow custom code).
Webflow & masonry.js (Project example inside):
faebric example: overlay
Card X with overlay Y. Read her (And google/youtube it “css overlay” - endless tuturials + Forum search):
CMS Issue
For cms collection its more tricky (No way to bind CSS width as vairable for each item). Some ideas her: