Grow your CSS skills. Land your dream job.

Need some help wih random height grid layout

  • # November 16, 2012 at 4:51 pm

    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](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.

    # November 16, 2012 at 5:41 pm

    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.

    # November 16, 2012 at 6:06 pm

    @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?

    # November 16, 2012 at 6:35 pm

    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 :(

    # November 16, 2012 at 6:40 pm

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

    Check this out!

    # November 16, 2012 at 6:45 pm

    @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

    # November 16, 2012 at 6:50 pm

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

    # November 16, 2012 at 7:11 pm

    @Gavii – you’re looking for Masonry as @ToxicFire has linked to above.

    # November 16, 2012 at 7:13 pm

    @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

    # November 17, 2012 at 3:43 am

    Thanks guys, thats exactly what i was after.

Viewing 10 posts - 1 through 10 (of 10 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".