The idea that I’m trying to create is hard to explain but I’ll do my best.
Essentially, what I would like to create is something with a pinboard style like pinterest.
I want the pinboard to be like this: http://output.jsbin.com/xazuxor (where the numbers are in that order and the number of columns is dynamic).
But, I want the items to align tightly to the item above it like this: output.jsbin.com/lavejac
Any help would be much appreciated!
Not sure what you mean… just in case, here’s a quick guide to Flexbox
Also, if you have a link to what you’ve already worked, it would be easier to understand where you might be getting it wrong.
Hey thanks for taking your time to respond. That’s a great link and it’s the tutorial that I stated with. On my original post I linked to two examples that I’ve created. I’m on mobile right now so it’s hard to copy them again.
Basically I want to make something like the 2nd jsbin link but where more columns will be made when the screen resizes. I think it should be possible with CSS.
you might want to use Bootstrap grid, then? That way you can decide that say 1 picture takes 4 units on a large screen, but takes all the screen on a small one?
Sorry I seem to be very fuzzy today.
I’m really trying to do this without using any frameworks or external plugins.
Also, the bootstrap grid is based on rows but I don’t want my items sorted into rows I want them to all be together.