search

jaredLunde / masonic

🧱 High-performance masonry layouts for React
https://codesandbox.io/s/0oyxozv75v
MIT License
811 stars 50 forks source link

How to make 2 column with difference width. #127

Open chuong3x opened 2 years ago

chuong3x commented 2 years ago

I have 2 column layout. I want to these column with difference width. How can I do that?

jaredLunde commented 2 years ago

This isn't possible right now

intelligence commented 1 year ago

Looking for the same functionality. Would be nice to be able to use variable width and/or height.

jaredLunde commented 1 year ago

Out of scope, use something else :)

intelligence commented 1 year ago

I see, do you know if if it's technically feasible, from a performance perspective to create a feature like that? I've been looking for react components that enables variable width and height, but there aren't any around.

Thanks for your reply :)

jaredLunde commented 1 year ago

I think it'd be algorithmically challenging. Masonry layouts like this one are really straightforward. They're laid out in columns and you just place the next cell in the shortest column. So all you have to track is the # of columns that fit in a given window, then keep track of the current height of each column. I haven't thought much about what a masonry layout that accepted arbitrary dimensions would look like tbh :\