The Lodge is members-only design/dev videos and Office Hours.

Next Office Hours Session: "Implementing an SVG Icon System" Nov 30 - 6:00 PM Eastern

[Solved] Fluid And Responsive Image Gallery

  • Anonymous
    # August 6, 2014 at 4:18 am

    The images are 153px wide. When space between images becomes too little, The last image would break into the next row and the re-adjust so that the new last image is at the right edge of the container, and the first image is at the edge of the left one. Exactly like this

    # August 6, 2014 at 4:28 am

    Here’s one to work with…where I threw in a media query too

    The math gets quite complex so I let the calc do the work but you need media queries for breakpoints based on the width of your images.

    However, this gets much easier with SASS & Mixins

    EDIT – Hmmm..just noticed your linked fiddle…looks pretty much like we came up with the same solution.

    # August 6, 2014 at 8:05 am

    Looks like you found your answers then.

    Time to try it out and see if we can help you over the bits you struggle with.

    # August 6, 2014 at 2:52 pm

    I was looking for this

    I finally found a solution, implemented it and it was working perfectly. Then i tested it on multiple browsers and thats when it all went to shit. The browser compatibility for calc() isn’t very good. It’s times like these were i think the web is the worst of all software developing fields. Finally a working solution that can’t be used because stupid fucking browsers that should have died years ago are still being used by millions today. Fuck this shit.

    # August 6, 2014 at 2:59 pm

    OK then.


    # August 7, 2014 at 7:41 am

    elkroke, have you tried using masonry.js?

    Its normally used for organizing items of differing sizes into a grid, but theres no reason you couldn’t use it in your situation, if everything else has failed. Browser support is very good (ie8+ , all modern browsers)

    edit: I feel like the isFitWidth option in masonry might be what you need…
    An Anonymous Pen via @CodePen

Viewing 7 posts - 16 through 22 (of 22 total)

You must be logged in to reply to this topic.

There's a whole bunch of content on CSS-Tricks.

Search for Stuff   •   Browse the Archives

Get the Newsletter ... or get the RSS feed