5

Using isotope with the extension of perfectMasonry by zonear

So far it looks like it is working well, all I am wondering is if anyone knows how to center the container. Tried with css with no luck. Original isotope has centered masonry

Anyone? Thanks

>> UPDATE <<

new isotope (v2) is out and it does the "perfect masonry" bit with a layoutmode called packery. Also the new isotope version does center masonry/isotope. But I don't actually use fitWidth as I simply use bootstrap and isotope applied on top to get centered masonry at layout start (not centering once filtered tho, for that use fitWidth)

rob.m
  • 9,843
  • 19
  • 73
  • 162
  • Second link is broken. – Mizipzor Jul 29 '14 at 20:16
  • @Mizipzor thanks, updated. D. Desandro at Metafizzy moved the v1 location. – rob.m Mar 16 '15 at 13:57
  • For isotope v2 users, the [docs state](http://isotope.metafizzy.co/layout-modes/masonry.html#fitwidth) that _fitWidth_ is only compatible with fixed-size columns, not with percentage positioning - which makes sense: if you have tiles that are 25% of the container width, then change the container size, the tiles inside it resize as well. – Ben Hull Mar 14 '17 at 00:46

1 Answers1

5

Nice to hear that you found the extension. :) Currently the only way to get it centered is to have a specific width on the container. Of course, if you want your design to be responsive (why wouldn't you) this, as a pure CSS solution, is not viable.

For responsive layouts you need to do it "by hand" - Bind a resize trigger to the window and on every resize, calculate how wide the container would need to be (knowing your tile widths). I will bake this capability into the extension at some point when I get the time. Hope this helps. :)

Edit: The perfectMasonry now supports centering the layout by pure CSS, as it now gets width specified. So, simple margin auto for the container CSS should do the trick. Like so.

#container {
    margin: auto;
}
crappish
  • 2,688
  • 3
  • 28
  • 42
  • Hey, thanks! How about having an horizontal layout? In the code you specify the height, thought I could set a container height and have the layout horizontal, but it isn't working (Or i haven't managed to) – rob.m Jan 14 '13 at 14:43
  • Oh, you mean that it would scroll sideways? – crappish Jan 22 '13 at 08:20
  • yep.. generally your extension is perfect in terms of perfect masonry. But what if I wanted to center the layout?Or what If I wanted an horizontal layout (yes that it'd scrolld sideways) with a container fixed height? David has them both: Centered: http://isotope.metafizzy.co/custom-layout-modes/centered-masonry.html Horizontal: http://isotope.metafizzy.co/docs/layout-modes.html#masonryhorizontal – rob.m Jan 22 '13 at 12:16
  • Yeah, it doesn't support those at the moment. :/ It didn't even occur to me that someone would like to set it horizontally. :P – crappish Jan 22 '13 at 12:47
  • to be honest I was just playing around. Actually what I wanted to do was to have the container fluid or at least be able to center the layout without the need of using a fixed width :) – rob.m Jan 22 '13 at 13:08
  • or peraphs having % width/height boxes? :P – rob.m Jan 23 '13 at 04:45
  • I added the ability to have the layout centered. Check out the edits in the original answer. :) – crappish Feb 08 '13 at 12:40
  • 1
    Just to let you know - PerfectMasonry now has both, horizontal and fluid layouts :) – crappish Jul 09 '13 at 13:04
  • Wen i try your example.html on the desktop and I resize the browser to a mobile view 320pxw, I get one box bigger than the browser and a hor scrollbar. I thought liquid would adjust to the browser size and be good for mobiles too then – rob.m Aug 10 '13 at 13:55
  • Hi, this works perfectly as I am using it. But I am on the fluid layout and the items do not resize to 1005 when on mobile view. how can I reset them to 1005 width when on mobile? e.g. <767 – rob.m Dec 22 '14 at 12:13