treehouse : what would you like to learn today?
Web Design Web Development iOS Development

Need some help wih random height grid layout

  • So im working on re-designing one of my sites and the layout i want to creat a grid layout where the height can be anything and they all fit together, like http://minus.com

    Iv been working on this but its got me so confused i no longer know what to do, iv googled but haven't found what im after. so if anyone can help i would be very grateful.

  • I think I saw a grid framework, like this a while back but I can't remember where and its not in my bookmarks or history.... I think mebe it was somewhere on code visually try looking through their archives for the past couple of months, you'll probably find it.

  • @Gavii, so it took me a moment to figure out exactly what you were referring to, but are you talking about having an 'endless' or 'infinite' scroll on your page?

  • I think Gavii means a grid system where instead of just switching from normal layout to a single column for like mobile design it switches to a smaller multicolumn layout first with the number of colums depending on how narrow the window is I.e. a layout that has a row with 12 columns as you shrink it becomes two rows of 6 columns. then 3 rows of 4 etc with some ordering based around the height. I've seen one and now I can't find it :(

  • @ToxicFire, so you are referring to responsive grid layouts?

    Check this out!

  • @JohnMotylJr Neh thats just a standard grid system that goes from its horizontal layout to the vertical layout no steps inbetween.

    Something like this http://desandro.com/resources/jquery-masonry but i thought the one i saw was css only :S

  • im referring to the way it has blocks and they can all be different heights and still have the same margin between each other.

  • @Gavii - you're looking for Masonry as @ToxicFire has linked to above.

  • @Gavii,

    Are you open to using a jQuery plugin to achieve that effect?

    If so here are a couple references for you: Workmark jQuery Masonry

  • Thanks guys, thats exactly what i was after.