Masonry Layout with nested cells?

#1

Has anyone done a masonry layout in Antetype with nested cells? I’m dabbling but results seem flaky. I think it’s the flex that’s getting in the way…
I should add that the height of cells should be dynamic (shrink). Width should ideally be dynamic too, with a min-width and max-width set for wrapping.

#2

Done it. Parent cell needs display:block.
Masonry.atype.zip (307.2 KB)

1 Like
#3

Cool! By using block, no flexbox is used anymore, but anyway it’s responsive that way too. Not sure why the columns seem to have a min-width and are recalculated if the window gets smaller.

Maybe one day we can use native mansory grid for this.

#4

I created another example for achieving a masonry laoyut.

masonry layout.zip (303.5 KB)

Open in cloud

Based on this code pen: https://codepen.io/iamsaief/pen/jObaoKo

2 Likes
#5

Awesome. Love it!

2 Likes