Treehouse: Grow your CSS skills. Land your dream job.

Image Grid Like Google Search

  • # July 14, 2011 at 6:06 am

    Hey guys! I need some help…

    I’m currently designing a portfolio and I would really like the grid of images to kinda look like the image search at Google.

    These is what “describes” the grid, and what I’m trying to create:

    1. Images are sorted in rows, expanding to fit the highest image.
    2. Images are pushed all the way to both the left and right edge. I think it’s something like text-align: justify;
    3. An image can be of any height, the grid will adjust.

    I would say that I’m pretty damn close. This is what I’ve got so far:

    I would prefer the markup that I’m using, staying away from ugly tables. And also no javascript if it’s possible.


    # July 14, 2011 at 9:04 am

    Hi Anton!

    Have you checked out the jQuery Masonry plugin? Using it is like having a “float:top” css option, or if you need the images as you described above, then check out this plugin I modified from this post. :)

    Edit: Oh oops… no javascript eh? So what exactly are you wanting? It looks like you might have it.

    # July 16, 2011 at 6:00 am

    Yip, I’ve seen Masonry! Looks really nice.

    I’m trying to create some sort of recipe for the grid so that it’s possible to make the images any height. As for now, a really tall image will mess up the layout.

    I would love to have the grid behave like a table. Every row adjusts to the tallest image, and the margins and whitespace stay intact. I was hoping to do this with the markup I’m using right now and no JS, but that may not be possible…

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

You must be logged in to reply to this topic.