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

Masonry Photo Grid Left to Right

  • # December 31, 2012 at 12:50 am

    So, I was looking at [this](//css-tricks.com/seamless-responsive-photo-grid/ “this”) article on CSS Tricks and was wondering if there was a way to have this photo grid display images from left to right instead of an unnatural top to bottom.

    [Someone](//css-tricks.com/seamless-responsive-photo-grid/#comment-101108 “”) mentioned it in the comments, but they didn’t receive a response.

    Any ideas how to fix this?

    Thanks in advance.

    # December 31, 2012 at 1:40 am

    it looks like the grid is based on utilizing [CSS3 columns](//webdesign.tutsplus.com/tutorials/htmlcss-tutorials/an-introduction-to-the-css3-multiple-column-layout-module/), so you’d need to remove all that styling and possibly try replacing it with a ‘float:left’ + a set height on ‘#photos img’.

    i’m sure there’s a better way to do it but that was the quickest idea that came to mind. one definite shortcoming to doing it like this vs loading the images in columns is the image row’s are all a different width based on the widths of the images you’re loading.

    it would be fine if all the images were the same size though, perhaps thumbnails that load the full size image on click.

    # December 31, 2012 at 6:33 am

    Yeah the Gallery grid on here is CSS colums based. There is always [JQuery masonry](//masonry.desandro.com/) – I’m using this on my personal site – [Codeboxers CodeWall](//codeboxers.com/code-wall/) to pull off a nice tiled effect.

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

You must be logged in to reply to this topic.