search

dantrain / react-stonecutter

Animated grid layout component for React
http://dantrain.github.io/react-stonecutter
MIT License
1.21k stars 72 forks source link

Feature Request: Varied column widths. #1

Open phil3903 opened 8 years ago

phil3903 commented 8 years ago

Not sure if there's already support for this, but it'd be fantastic if it were possible.

dantrain commented 8 years ago

This would be very cool, it's not explicitly supported right now. The best approach at the moment would be to supply a new layout function that decides which column to lay out each item in based on the item's props. So you could place wider items in a wider column.

The makeResponsive higher-order component assumes a fixed column width to set its breakpoints so something else would be needed here.

bento-n-box commented 8 years ago

+1

newsiberian commented 8 years ago

Hello. @dantrain, thank you for such a great project. I added new layout. This is not exactly what were asked, but it is close. This enough for my use case. Layout uses the column width and ratio x1, x2, x3. screencast-1465806660

dantrain commented 8 years ago

@newsiberian Wow looks awesome!

Hazantip commented 7 years ago

@newsiberian Looks amazing! but how to use it ? I understand that i need to download from your branch, make layout attr as layout={layout.horizontal}, but how i can get different width of elements? Can you show code sample?

wyhinton commented 2 years ago

Any chance this could get merged?

wyhinton commented 2 years ago

I've created a simple example demonstrating @newsiberian 's horizontal layout: https://github.com/wyhinton/react-stonecutter-horizontal-example

image