Wondering what is the best way to go about laying out these thumbs.
TEST PAGE
I'm still working out the code for the colorbox pop ups to be responsive if you are looking on mobile but...

What I did was create a sub grid with 12 columns but I see that isn't the best way
I can't find where you would apply flex doing it this way, so I'm assuming you'd just go with a regular row/column set up and have them stack?
Wanted those thumbs to center top or center center in the columns and change from 12 to 6 kind of thing.

I'm thinking this is a basic but ran into this on my first layout try so looking for a suggestion for the next go around.

Container + flex

See the example

Yeah, I see without the container(s) the images wrap to a single column (in RSD)... thanks for the example.
I wonder why, must have something to do with coffeegrinder I'll have to look at the layout code with firebug

Inside RSD just an column set with flex wraps the images to a single column,
but in firefox preview they wrap to to a split row like the images inside containers do inside RSD?
If you follow me.
I wonder if it goes to an IE engine or something using RSD ours went to IE but in quirks mode.
This must be doing something similar maybe.

Anyway thanks again.

It can be done with flex, and without containers. If you are first inserting the picture element, they will stack vertically in a column because the elements defaults with no float. Each picture element need to be given a class, or individually told to float. Once they are floated they will line up horizontally in the column, like columns would do in a row. After that, give the column a position of flex, and keep the default of row direction. Then you can justify it with space between, or space around. If you select column direction, they will stack vertically.

I included a dropbox link to an example I created with three images, using flex. In the example, the final image in the last row was selected, and in the flex box, I changed flexbox properties of align-self to center, so it centered itself vertically in the row. If the column direction was column, that last image would have centered horizontally across the column.

Sometimes there is an odd issue where I believe Firefox will require the a container, but for this example it is fine.

https://www.dropbox.com/s/mvd28zujaiiexag/pics.rsd?dl=0

If you want text below the images, then the images and text will need to be in containers.

It looks like a RSD bug unless this is me missing something, or my PC this time. Check the zip and see if you're getting the same result I do?

What I found when I tried that (before I tried the sub-grid) is that they wrap to a single column inside RSD. You can see with Monsour's example they wrap to rows when placed in containers which is correct. Now inside RSD without the containers and with flex on a column they wrap to a single column but when previewed in firefox they do have the correct behavior and do wrap to the rows.

So it looks like something going wrong with working inside RSD with the flex wrapping, since it works in a browser preview but not when looking at it when working in RSD.

http://www.gordw.com/test/flexWRAP.zip

A note in the example I put preview in that second example text.
I meant preview in a browser there... the preview inside RSD also breaks on my PC.

Wow, that made me curious on the flex behavior in IE.
I don't use that IE browser so I keep it at IE9 for testing websites.

It looks like the flex version used in RSD is breaking with IE9?
Firefox and chrome still work, I keep it back at 9 since the last time I looked
it's still used by over 1 in 10 - 10% of users
So looking at a fix: http://stackoverflow.com/questions/2437 … ve-for-ie9
but I'm hoping my IE9 stats are wrong.

That may be a reason for the break for flex on my PC, if it's going to the IE engine.
Still not good news if it's failing on 10%, that can't be right that has to be lower...
I'll have to see if I can check that stat in my analytics
and see if I can find more on it on the net.

Keep in mind that IE 8, 9 and 10 are all dead browsers and no longer supported or maintained by Microsoft. At some point, people that cling to operating systems that are archaic at best are just not going to have a good browsing experience. Code for the masses, not the minority.

Just something to keep in mind...

Yeah Scott I got off topic but just wanted to look into it a bit...
I thought flex went back to around 8.

FYI on flex / IE support.
I'm getting 6.99% in my analytics still on IE9 but find over all it's at 4% on the net
Support for flex starts at 10 with pre-fixes.
But looking at an over all global stat where the site will be supported with all browsers is 94.22% which is acceptable in my opinion.
You can see the flex support here:
http://caniuse.com/#feat=flexbox
Browser version market share is here:
https://www.netmarketshare.com/browser- … pcustomd=0

So bottom line it doesn't look like a real concern,
just IE still haunting us after all these years of grief.

Just need to figure out why it's failing in RSD without the containers?
Good news is I got colorbox mostly sorted for mobile, I'll post a tutorial on that later.
Two different fixes depending on the jQuery version used there.

Just to be sure, you should try to determine what that IE9 traffic is. How are they coming to your site? Are they being directed there by any advertising program like Adwords? Are they arriving from a keyword search? And they are arriving from your geographic area? A bunch of self-identifying "SEO" companies working in a basement in Pakistan aren't looking for your services and are not a client looking for your phone number. I think everyday I get about a half dozen emails from that sort of people.

You can get such information from a Google account, without having to actively fund an adwords campaign. And one of the great things about information from an analytics account is you can even see what the bounce rate is from each page, how long people are on a page, and what page in your site they visit before getting to a page.