Responsive gallery grid – combine resize with wrap

[rognz]

Hi there – I’m a relative newby at CSS.

I am trying to set up a dynamic thumbnail gallery grid that responds to changes in the size of the browser window via a combination of thumbnail resizing (i.e. number of thumbnails in each row remains unchanged) and then – once a min or max row width limit is reached – thumbnail wrapping between rows.

I have the thumbnail dynamic resizing working fine – it is just setting the width limits to trigger moving a thumbnail between rows I am struggling with.

Could anyone give me a hint how I could achieve this?

Many thanks

[Atelierbram]

If I get it, this seems to be a bit of a “chicken and egg problem”. Can you show what you did sofar in a Codepen?

Anyway, maybe not what you mean, but maybe these examples are helpfull; some math done with Sass mixins:

• this Fork of
• Chris Coyier’s – Simple Technique for using Sass for Rows-
• see also the screencast

[Chasew]

If you can use Flexbox, you might be interested in something like this:

http://codepen.io/dudleystorey/pen/Kgofa

Check the blog link in the details of the pen for more info.

[Chasew]

Edit: Whoops… somehow I double posted :(

[Author]

Posts