Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

separate options for gutterWidth and gutterHeight #2

Open
desandro opened this issue Apr 15, 2013 · 31 comments · May be fixed by #396
Open

separate options for gutterWidth and gutterHeight #2

desandro opened this issue Apr 15, 2013 · 31 comments · May be fixed by #396

Comments

@desandro
Copy link
Member

Right now gutter is a single option that controls both the vertical gutter and horizontal gutter between item elements. Having separate options for gutterWidth and gutterHeight would allow you to control these values separately.

Please +1 if you'd like to see this feature.

@oskarrough
Copy link

+1

Would be helpful for creating more ireggular grids.

@ChrisRollason
Copy link

  • 1

That would be useful!

@wichert
Copy link

wichert commented May 3, 2013

+1

4 similar comments
@ChrisC
Copy link

ChrisC commented May 6, 2013

+1

@halfempty
Copy link

+1

@Skaidon
Copy link

Skaidon commented Jun 18, 2013

+1

@ghost
Copy link

ghost commented Jun 20, 2013

+1

@djschoone
Copy link

Solution might be to give the smallest amount with the options. And provide extra needed margin via CSS for ie the bottom.

@danielsamuels
Copy link

+1

1 similar comment
@bradjonesca
Copy link

+1

@Scritik
Copy link

Scritik commented May 17, 2014

+1

1 similar comment
@rodleviton
Copy link

+1

@mgrn0
Copy link

mgrn0 commented Sep 16, 2014

I would love to have this feature, too - I am using packery in a responsive layout and smaller boxes stacked upon each other don't align with the taller boxes, just as in http://codepen.io/desandro/pen/pBlIw

2014-09-16_10-26-54

@mgrn0
Copy link

mgrn0 commented Sep 24, 2014

I tried to extend packery with a gutterHeight option for responsive layouts and it seems to almost work, at least with pixel values. When you resize http://codepen.io/magrolino/pen/yGdzk the vertical Gutter stays the same and is different from the horizontal gutter.

However, when I drag and drop the tiles vertically, the more I drag an item the more it is positioned too far down (like I missed taking the vertical gutter being taken into account when positioning / dragging an element to a new position, after window resize it fits again).

Am i completely off or is there a possible solution out there, at least with fixed pixel values?

p.s.: please forgive the brute approach for extending the options...

@mgrn0
Copy link

mgrn0 commented Oct 6, 2014

I did not add a fallback (yet) when no gutterHeight is provided, but resizing in both directions works and so does browser-resizing, too.
But I have a problem in combination with dragabilly - drag (and drop) within first row works perfectly, but in rows > 1 the positioning is off, like there is an additional padding / gutter added to the drop target (and I cannot find out where). I tried to show the behaviour in a screencast, I used a gutterHeight of 20px (you can see in the very narrow window-width that the gutterHeight is different from width, which is 2%):

https://dl.dropboxusercontent.com/u/81358/jing/packery-gutterHeight-bug.mp4

Fun thing: if I position a tile "wrong", resizing the browser window re-places it correctly. Can somebody point me in the right direction?

@matthewwilson
Copy link

+1

1 similar comment
@johnnyjanzen
Copy link

+1

@kaisermann
Copy link

+1 pretty please

@john-osullivan
Copy link

+1, with ice cream on top

@Luxbit
Copy link

Luxbit commented Nov 9, 2015

+1

1 similar comment
@echibi
Copy link

echibi commented Jan 14, 2016

+1

@avdeev
Copy link

avdeev commented Feb 8, 2016

+1

@lexgorbunov
Copy link

+100500

@mprofitlich
Copy link

+1

@wichert
Copy link

wichert commented Mar 22, 2016

Can everyone please stop adding +1 comments to this ticket? At this point they add no useful value, and they only cause a lot of useless email to be send to everyone.

@desandro, perhaps you can lock this discussion?

@matthewwilson
Copy link

+1 to what wichert said

@iliyaZelenko
Copy link

+1

1 similar comment
@axit-joost
Copy link

+1

@MrGrabazu
Copy link

MrGrabazu commented Jun 8, 2016

It appear that this feature would be really helpfull.
I think this space cannot be in percent vertically speaking because we never sizing the grid item with a percent value for height.
After almost 3 years, where is this wonderful feature ??
Or is there anyway to disactivate the vertical gutter and manage it by ourselves ?

And by the way : +1
:)

mkhazov pushed a commit to neuron-digital/packery that referenced this issue Aug 9, 2016
mkhazov added a commit to neuron-digital/packery that referenced this issue Aug 9, 2016
@JRadagast
Copy link

+1

@steve231293
Copy link

Hello @desandro
Is there any things new on this? I really need this feature.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Development

Successfully merging a pull request may close this issue.