With the current compose layouts is it possible to do something like this or I would need to create my own layout implementation? Taking into account that it’s dynamic and any item can have any of the shapes

I think you'd need a custom layout here, I think in CSS you'd use a grid layout to achieve this, but I'm not sure how CSS works with dynamic sized items.

I think the current GridLayout that are available in compose just support one axis span right?

yeah lazy grids in compose are for one axis span, what i mean is grid layouts in css have the ability to set a position in a grid and a size, which is kind of what you might need here, but if the items are dynamic then you'd need even more complicated logic 🙂

Oh! Both links are great! I’ll take a proper look. Thanks @Rebecca Franks!

Maybe you could achieve it with LazyTable. I would define an equal sized grid with that gap size and register item one-by-one with needed size and offset. However you have to calculate how many cells fit width, I guess BoxWithConstraint could help with this. For example if gap is 16.dp, then get screen width and calculate number of cells, lets say it would be 19 cells for width. Then you may register that green box with offset 0x0 and size (19-1)/2=9 cells for width and height. The blue one would have 10x0 offset and 9x4 size, and so on. Or alternatively you may take MinaBox and build your own layout on top of it 🐱 P.S.: If you precisely fit items in width, the horizontal scroll will be ignored (at least I hope so 😅). #shameless-self-promo 😅 https://github.com/oleksandrbalan/lazytable https://github.com/oleksandrbalan/minabox

That’s super cool @Oleksandr Balan! I think this may be it. I was kinda trying to do something with offsets as I had no idea how to make lazy stuff and for sure the perfomance wouldn’t be so good. I’ll give your lib a try!

Awesome, thx! 🥳

The padding trick was a bit too complicated, in the end I just split the columns and added the padding around each item itself, made it simpler to understand 😄